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Bootstrap 简介 


什么 是 Bootstrap ? 


Bootstrap 是 一 个 用 于 快速 开发 Web 应 用 程序 和 网 站 的 前 端 框架 。Bootstrap 是 基 
于 HTML、CSS、JAVASCRIPT 的 。 


历史 


Bootstrap 是 由 Twitter 的 Mark Otto 和 Jacob Thornton 开发 的 。Bootstrap 是 
2011 年 八 月 在 GitHub 上 发 布 的 开源 产品 。 


为 什么 使 用 Bootstrap ? 


e 移动 设备 优先 : E Bootstrap 3 起 ， 框 架 包 含 了 贯穿 于 整个 库 的 移动 设备 优先 
的 样式 。 
e 浏览 器 支持 : 所 有 的 主流 浏览 器 都 支持 Bootstrap. 


ceoce 


e 容易 上 手 : 只 要 您 具备 HTML 和 CSS 的 基础 知识 ， 您 就 可 以 开始 学 习 
Bootstrap。 


e 响应 式 设计 : Bootstrap 的 响应 式 CSS 能 够 自 适 应 于 台式 机 、 平 板 电 脑 和 手 
机 。 更 多 有 关 响 应 式 设 计 的 内 容 详 见 Bootstrap 响应 式 设 计 。 





e 它 为 开发 人 员 创建 接口 提供 了 一 个 简洁 统一 的 解决 方案 。 


e 它 包含 了 功能 强大 的 内 置 组 件 ， 易 于 定制 。 
它 还 提供 了 基于 Web 的 定制 。 
e. 它 是 开源 的 。 


Bootstrap 包 的 内 容 


e 基本 结构 : Bootstrap 提供 了 一 个 带 有 网 格 系统 、 链 接 样 式 、 背 景 的 基本 结 
构 。 这 将 在 Bootstrap 基本 结构 部 分 详细 讲解 。 

e CSS : Bootstrap 自 带 以 下 特性 : 全 局 的 CSS 设置 、 定 义 基 本 的 HTML 元 素 
样式 、 可 扩展 的 class， 以 及 一 个 先进 的 网 格 系统 。 这 将 在 Bootstrap CSS 部 
分 详细 讲解 。 

e 组 件 : Bootstrap 包含 了 十 几 个 可 重用 的 组 件 ， 用 于 创建 图 像 、 下 拉 菜 单 、 导 

mo ZSE RHES., FE 布局 组 件 部 分 详细 讲解 。 

JavaScript 插件 : Bootstrap 包含 了 十 几 个 自 定义 的 jQuery 插件 。 您 可 以 直接 

包含 所 有 的 插件 ， 也 可 以 逐个 包含 这 些 插件 。 这 将 在 Bootstrap 插件 部 分 详 

细 讲 解 。 

定制 : 您 可 以 定制 Bootstrap 的 组 件 、LESS 变量 和 jQuery 插件 来 得 到 您 自己 

的 版 本 。 


在 线 实 例 
本 站 的 Bootstrap 教程 包含 了 上 百 个 实例 。 
你 可 以 使 用 我 们 的 在 线 编辑 器 在 线 编辑 代码 ， 并 点 击 运 行 按钮 查看 结果 。 


Bootstrap 实例 


«div class-"container"- 
«p»Create a responsive table with alternating cell background co: 


«div class-"table-responsive'» 
«table class-"table table-striped table-bordered"» 
«thead» 
«tr» 
<th>#</th> 
<th>Name</th> 
«th»Street«/th» 
«/tr» 
«/thead» 
<tbody> 
<tr> 
<td>1</td> 
<td>Anna Awesome</td> 
<td>Broome Street</td> 
</tr> 
«tr» 
«td»2«/td» 
«td»Debbie Dallas</td> 
<td>Houston Street«/td» 
«/tr» 
«tr» 
«td»3«/td» 
«td»John Doe</td> 
«td»2Madison Street«/td» 
«/tr» 
</tbody> 
</table> 
</div> 


</div> 
4] um s 
点 击 "尝试 一 下 " 按钮 查看 它 是 如 何 工 作 的 。 





W3School Bootstrap 教程 
Bootstrap 环境 安装 


Bootstrap 安装 是 非常 容易 的 。 本 章 将 讲解 如 何 下 载 并 安装 Bootstrap， 讨 论 
Bootstrap 文件 结构 ， 并 通过 一 个 实例 演示 它 的 用 法 。 


下 载 Bootstrap 


您 可 以 从 http://getbootstrap.com/ 上 下 载 Bootstrap 的 最 新 版 本 。 当 您 点 击 这 个 链 
接 时 ， 您 将 看 到 如 下 所 示 的 网 页 : 


Bootstrap 


Sleek, intuitive, and powerful mobile first front-end framework 


for faster and easier web development 


ootstrap Download source 





您 会 看 到 两 个 按钮 : 


e Download Bootstrap : Fix Bootstrap。 点 击 该 按钮 ， 您 可 以 下 载 Bootstrap 
CSS, JavaScript 和 字体 的 预 编译 的 压缩 版 本 。 不 包含 文档 和 最 初 的 源 代码 文 
件 。 

Download Source : 下 载 源 代 码 。 点 击 该 按钮 ， 您 可 以 直接 从 from 上 得 到 最 
新 的 Bootstrap LESS 和 JavaScript 源 代码 。 


如 果 您 使 用 的 是 未 编译 的 源 代码 ， 您 需要 编译 LESS 文件 来 生成 可 重用 的 CSS x 
件 。 对 于 编译 LESS 文件 ，Bootstrap 官方 只 支持 Recess， 这 是 Twitter 的 基于 
less.js 的 CSS 提示 。 


为 了 更 好 的 了 解 和 更 方便 的 使 用 ， 我 们 将 在 本 教程 中 使 用 Bootstrap 的 预 编译 版 


o 


ee 在 独立 的 功能 开发 中 ， 您 不 必 每 次 都 包含 这 些 独 
立 的 文件 。 


本 教程 编写 时 ， 使 用 的 是 最 新 版 (Bootstrap 3) 。 


文件 结构 
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预 编译 的 Bootstrap 
当 您 下 载 了 Bootstrap 的 已 编译 的 版 本 ， 解 压缩 ZIP 文件 ， 您 将 看 到 下 面 的 文件 / 目 
录 结 构 : 


bootstrap/ 


"in.css 
theme 
theme ,mtn ,cs 


p 
b 
be t 
— bootst 
b t 
b eJ 
b 


ootst 





g p ( T2 J 
glyphicons-h J 
-一 glyphicons-halflings-regula: 
` glyphicons-h ] 


如 上 图 所 示 ， 可 以 看 到 已 编译 的 CSS 和 JS (bootstrap) ， 以 及 已 编译 压缩 的 
CSS 和 JS (bootstrap.min.) 。 同 时 也 包含 了 Glyphicons 的 字体 ， 这 是 一 个 可 选 
的 Bootstrap 主题 。 

Bootstrap 源 代 码 


如 果 您 下 载 了 Bootstrap 源 代 码 ， 那 么 文件 结构 将 如 下 所 示 : 


E^ js/ 
-一 fonts/ 


docs-assets/ 
— examples/ 


-一 *.html 
e /ess/、js/ 和 fonts/ 下 的 文件 分 别 是 Bootstrap CSS, JS 和 图 标 字 体 的 源 代 
码 。 


e dist/ 文件 夹 包含 了 上 面 预 编译 下 载 部 分 中 所 列 的 文件 和 文件 夹 。 
e docs-assets/、examples/ 和 所 有 的 *.html 文件 是 Bootstrap 文档 。 


HTML 模板 


一 个 使 用 了 Bootstrap 的 基本 的 HTML 模板 如 下 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 模板 </title> 
«meta name="viewport" content="width=device-width, initial-s‘ 
«!-- 引入 Bootstrap --> 
«link hrefz'"css/bootstrap.min.css" rel-z"stylesheet"» 


«!-- HTML5 Shim 和 Respond.js 用 于 让 IE8 支持 HTML5 元 素 和 媒体 查询 
<!-- 注意 : 如 果 通 过 file:// 引入 Respond.js 文件 ， 则 该 文件 无 法 起 交 
<!--[if lt IE 9]> 
«script srcz"https://oss.maxcdn.com/libs/html5shiv/3.7.0/t 
«script src-"https://oss.maxcdn.com/libs/respond.js/1.3.0, 
«![endif]--» 
</head> 
<body> 
<h1>Hello, world!</h1> 


<!-- jQuery (Bootstrap 的 JavaScript 插件 需要 引入 jQuery) --> 
«script srcz"https://code.jquery.com/jquery.js"»«/script» 
<!-- 包括 所 有 已 编译 的 插件 --> 
<script src="js/bootstrap.min.js"></script> 
</body> 
«/html» 


ja] zm s 





在 这 里 ， 您 可 以 看 到 包含 了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 
文件 ， 用 于 让 一 个 常规 的 HTML 文件 变 为 使 用 了 Bootstrap 的 模板 。 


有 关上 面 代 码 段 中 每 个 元 素 的 细节 将 在 Bootstrap CSS 概览 章节 详细 讲解 。 


实例 


现在 让 我 们 尝试 使 用 使 用 Bootstrap 输 出 "Hello, world!" : 


<!DOCTYPE html» 
«html» 
«head» 
<title> 在 线 尝 试 Bootstrap 实例 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<h1>Hello, world!</h1> 


</body> 
</html> 


II 


Bootstrap CDN 推 荐 


本 站 实例 采用 的 是 百度 的 静态 资源 库 (http://cdn.code.baidu.com/) 上 的 Bootstrap 资 
源 。 


百度 的 静态 资源 库 的 CDN 服务 ， 访 问 速度 更 快 、 加 速效 果 更 明显 、 没 有 速度 和 
宽 限制 、 永 久 人 免费 ,引入 代码 如 下 : 


3 


<!-- 新 Bootstrap 核心 CSS 文件 --> 
«link hrefz"http://apps.bdimg.com/libs/bootstrap/3.0.3/css/bootstr: 


<!-- 可 选 的 gootstrap 主 题 文件 (一 般 不 使 用 ) --> 
«script srcz"http://apps.bdimg.com/libs/bootstrap/3.0.3/css/bootst! 


<!-- jQuery 文件 。 务 必 在 bootstrap .min.js 之 前 引入 --» 
«script srcz"http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js' 


«!-- 最 新 的 Bootstrap 核心 JavaScript 文件 --» 
«script srcz"http://apps.bdimg.com/libs/bootstrap/3.0.3/js/bootstr: 


[EE Mu E 





Bootstrap CSS 
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在 这 一 章 中 ， 我 们 将 讲解 Bootstrap 底层 结构 的 关键 部 分 ， 包 括 我 们 让 web 开发 变 
得 更 好 、 更 快 、 更 强壮 的 最 佳 实践 。 


HTML 5 文档 类 型 (Doctype) 


Bootstrap 使 用 了 一 些 HTML5 元 素 和 CSS 属性 。 为 了 让 这 些 正常 工作 ， 您 需要 使 
用 HTML5 文档 类 型 (Doctype) 。 因此 ， 请 在 使 用 Bootstrap 项 目的 开头 包含 下 
面 的 代码 段 。 


<!DOCTYPE html» 
«html» 
nimis 
如 果 在 Bootstrap 创建 的 网 页 开头 不 使 用 HTML5 的 文档 类 型 (Doctype) ， 您 可 能 


会 面临 一 些 浏览 器 显示 不 一 致 的 问题 ， 其 至 可 能 面临 一 些 特定 情境 下 的 不 一 致 ， 以 
致 于 您 的 代码 不 能 通过 W3C 标准 的 验证 。 


移动 设备 优先 
移动 设备 优先 是 Bootstrap 3 的 最 显著 的 变化 。 


在 之 前 的 Bootstrap 版 本 中 (直到 2.x) ， 您 需要 手动 引用 另 一 个 CSS， 才 能 让 整 
个 项 目 友 好 的 支持 移动 设备 。 


现在 不 一 样 了 ，Bootstrap 3 默认 的 CSS 本 身 就 对 移动 设备 友好 支持 。 


Bootstrap 3 的 设计 目标 是 移动 设备 优先 ， 然 后 才 是 桌面 设备 。 这 实际 上 是 一 个 非常 
及 时 的 转变 ， 因 为 现在 越 来 越 多 的 用 户 使 用 移动 设备 。 

为 了 让 Bootstrap 开发 的 网 站 对 移动 设备 友好 ， 确 保 适 当 的 绘制 和 触 屏 缩放 ， 需 要 
在 网 页 的 head 之 中 添加 viewport meta 标签 ， 如 下 所 示 : 


«meta name-"viewport" content-"width-device-width, initial-scale-1 
El E ue 
width 属性 控制 设备 的 宽度 。 假 设 您 的 网 站 将 被 带 有 不 同 屏幕 分 辩 率 的 设备 浏览 ， 
那么 将 它 设置 为 device-width 可 以 确保 它 能 正确 呈现 在 不 同 设备 上 。 
initial-scale-1.0 确保 网 页 加 载 时 ， 以 1:1 的 比例 呈现 ， 不 会 有 任何 的 缩放 。 





在 移动 设备 浏览 器 上 ， 通 过 为 viewport meta 标签 添加 user-scalable2no 可 以 禁 
用 其 缩放 Goonind 功能 。 


通常 情况 下 ，maximum-scale=1.0 a user-scalable=no 一 起 使 用 。 这 样 禁 用 缩放 
功能 后 ， 用 户 只 能 滚动 屏幕 ， 就 能 让 您 的 网 站 看 上 去 更 像 原 生 应 用 的 感觉 。 


注意 ， 这 种 方式 我 们 并 不 推荐 所 有 网 站 使 用 ， 还 是 要 看 您 自己 的 情况 而 定 ! 


«meta name="viewport" content="width=device-width, 
initial-scale-1.0, 
maximum-scale-1.0, 
user-scalable-no"» 


响应 陈 图 像 


«img srcz"..." class-"img-responsive" alt=" 响 应 式 图 像 "> 


通过 添加 img-responsive class 可 以 让 Bootstrap 3 中 的 图 像 对 响应 式 布 局 的 支持 
更 友好 。 


接 下 来 让 我 们 看 下 这 个 class 包含 了 哪些 css 属性 。 
在 下 面 的 代码 中 ， 可 以 看 到 img-responsive class 为 图 像 赋予 了 max-width: 100%; 
和 height: auto; 属性 ， 可 以 让 图 像 按 比 例 缩放 ， 不 超过 其 父 元 素 的 尺寸 。 


.img-responsive { 
display: inline-block; 
height: auto; 
max-width: 10096; 

} 


这 表明 相关 的 图 像 呈 现 为 inline-block。 当 您 把 元 素 的 display 属性 设置 为 inline- 
block， 元 素 相 对 于 它 周 围 的 内 容 以 内 联 形式 呈现 ， 但 与 内 联 不 同 的 是 ， 这 种 情况 下 
我 们 可 以 设置 宽度 和 高 度 。 


设置 height:auto， 相 关 元 素 的 高 度 取 决 于 浏览 器 


设置 max-width 为 10096 会 重 写 任 何 通 过 width 属性 指定 的 宽度 。 这 让 图 片 对 响应 
式 布局 的 支持 更 友好 。 


全 局 显示 、 排 版 和 链接 
基本 的 全 局 显示 


Bootstrap 3 使 用 body (margin: 0;} 来 移 除 body 的 边 距 。 
请 看 下 面 有 关 body 的 设置 


body (1 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
font-size: 14px; 
line-height: 1.428571429; 
color: 4333333; 
background-color: #ffffff; 


第 一 条 规则 设置 body 的 默认 字体 样式 为 "Helvetica Neue", Helvetica, Arial, sans- 
Serif, 


第 二 条 规则 设置 文本 的 默认 字体 大 小 为 14 像素 。 
第 三 条 规则 设置 默认 的 行 高 度 为 1.428571429。 
第 四 条 规则 设置 默认 的 文本 颜色 为 #333333。 
最 后 一 条 规则 设置 默认 的 背景 颜色 为 白色 。 


排版 


使 用 @font-family-base、 @font-size-base 和 @line-height-base 属性 作为 排版 祥 
式 。 


链接 样式 


通过 属性 @link-color 设置 全 局 链接 的 颜色 。 
对 于 链接 的 默认 样式 ， 如 下 设置 


a:hover, 

a:focus ( 
color: 22a6496; 
text-decoration: underline; 


j 


a:focus { 
outline: thin dotted #333; 
outline: 5px auto -webkit-focus-ring-color; 
outline-offset: -2px; 


j 


MA "ABUS ES EREREE, 或 者 点 击 过 的 链接 ， 颜 色 会 被 设置 为 #2a6496。 同 
时 ， 会 呈现 一 条 下 划 线 。 


除 此 之 外 ， 点 击 过 的 链接 ， 会 呈现 一 个 颜色 码 为 48333 的 细 的 虚线 轮廓。 另 一 条 规 
则 是 设置 轮廓 为 5 像素 宽 ， webkit 浏览 器 有 一 个 -webkit-focus-ring- 
color 的 浏览 器 扩展 。 轮 廓 偏 移 设置 为 -2 像素 。 


以 上 所 有 这 些 样式 都 可 以 在 scaffolding.less 中 找到 。 


避免 跨 浏览 器 的 不 一 致 


Bootstrap 使 用 Normalize 来 建立 跨 浏 览 器 的 一 致 性 。 


Normalize.css 是 一 个 很 小 的 CSS 文件 ， 在 HTML 元 素 的 默认 样式 中 提供 了 更 好 
HIES A] 4 览 1 器 一 致 性 。 


容器 (Container) 


<div class="container"> 


</div> 


Bootstrap 3 的 container class 用 于 包 襄 页 面 上 的 内 容 。 让 我 们 一 起 来 看 看 
bootstrap.css 文件 中 的 这 个 .container class。 


.container ( 
padding-right: 15px; 
padding-left: 15px; 
margin-right: auto; 
margin-left: auto; 


面 的 代码 ， 把 container 的 左右 外 边 距 (margin-right、margin-left) 交 由 浏 
决定 


意 ， 由 于 内 边 距 (padding) 是 固定 宽度 ， 上 默认 情况 下 容器 是 不 可 馈 套 的 。 


ik 
Bt 
n 


.container:before, 
.container:after ( 
display: table; 
contents " 4 


j 


这 会 产生 伪 元 素 。 设 置 display 7; table， 会 创建 一 个 匿名 的 table-cell 和 一 个 新 的 
块 格式 化 上 下 文 。:before 伪 元 素 防 止 上 边 距 崩塌 ，:after 伪 元 素 清除 浮动 。 


如 果 conteneditable 属性 出 现在 HTML 中 ， 由 于 一 些 Opera bug, BIZ Exh7c5 6) 
建 一 个 空格 。 这 可 以 通过 使 用 content: ”" 来 修复 。 


.container:after ( 
clear: both; 


j 


它 创 建 了 一 个 伪 元 素 ， 并 确保 了 所 有 的 容器 包含 所 有 的 浮动 元 素 。 
Bootstrap 3 CSS 有 一 个 申请 响应 的 媒体 查询 ， 在 不 同 的 媒体 查询 六 值 范围 内 都 为 
container 设置 了 max-width， 用 以 匹配 网 格 系统 。 


Qmedia (min-width: 768px) { 
.container ( 
width: 750px; 


Bootstrap 浏览 器 /设备 支持 

Bootstrap 可 以 在 最 新 的 桌面 系统 和 移动 端 浏览 器 中 很 好 的 工作 。 
旧 的 浏览 器 可 能 无 法 很 好 的 支持 。 

下 表 为 Bootstrap 支持 最 新 版 本 的 浏览 器 和 平台 : 


Chrome Firefox IE Opera Safari 
Android YES YES 不 适用 NO 不 适用 
iOS YES 不 适用 不 适用 NO YES 
Mac OS X YES YES 不 适用 YES YES 
Windows YES YES MES MES NO 


e Bootstrap 支持 Internet Explorer 8 及 更 高 版 本 的 IE 浏览 器 。 


Bootstrap 网 格 系统 


本 章节 我 们 将 讲解 Bootstrap 的 网 格 系统 (Grid System) 。 


Bootstrap 提供 了 一 套 响 应 式 、 移 动 设 各 优先 的 流 式 网 格 系统 ， 随 着 屏幕 或 视 口 
(viewport) 尺寸 的 增加 ， 系 统 会 自动 分 为 最 多 12 列 。 


什么 是 网 格 (Grid) ? 


摘自 维基 百科 : 


在 平面 设计 中 ， 网 格 是 一 种 由 一 系列 用 于 组 织 内 容 的 相交 的 直线 (垂直 的 、 
水 平 的 ) 组 成 的 结构 (通常 是 二 维 的 ) 。 它 广泛 应 用 于 打印 设计 中 的 设计 布局 
和 内 容 结构 。 在 网 页 设计 中 ， 它 是 一 种 用 于 快速 创建 一 致 的 布局 和 有 效 地 使 用 
HTML 和 CSS 的 方法 。 


简单 地 说 ， 网 页 设计 中 的 网 格 用 于 组 织 内 容 ， 让 网 站 易于 浏览 ， 并 降低 用 户 端的 负 


o 


什么 是 Bootstrap 网 格 系统 (Grid System) ? 


Bootstrap 官方 文档 中 有 关 网 格 系统 的 描述 : 


Bootstrap 包含 了 一 个 响应 式 的 、 移 动 设备 优先 的 、 不 固定 的 网 格 系统 ， 可 以 
随 着 设备 或 视 口 大 小 的 增加 而 适当 地 扩展 到 12 列 。 它 包含 了 用 于 简单 的 布局 
选项 的 预定 义 类 ， 也 包含 了 用 于 生成 更 多 语义 布局 的 功能 强大 的 混合 类 。 


让 我 们 来 理解 一 下 上 面 的 语句 。 Bootstrap 3 是 移动 设备 优先 的 ， 在 这 个 意义 上 ， 
Bootstrap 代码 从 小 屏幕 设备 〈 比 如 移动 设备 、 平 板 电脑 ) 开始 ， 然 后 扩展 到 大 屏 
幕 设 备 (比如 笔记 本 电脑 、 台 式 电 脑 ) 上 的 组 件 和 网 格 。 


移动 设备 优先 策略 


e 内 容 

o 决定 什么 是 最 重要 的 。 
e 布局 

o 优先 设计 更 小 的 宽度 。 

o 基础 的 CSS 是 移动 设备 优先 ， 媒 体 查询 是 针对 于 平板 电脑 、 台 式 电 脑 。 
e 渐进 增强 

o 随 着 屏幕 大 小 的 增加 而 添加 元 素 。 


相应 式 的 网 格 系统 随 着 屏幕 或 视 口 (viewport) 尺寸 的 增加 ， 系 统 会 自动 分 为 最 多 
1251, 


Bootstrap 网 格 系统 (Grid System) 的 工作 原理 


网 格 系统 通过 一 系列 包含 内 容 的 行 和 列 来 创建 页 面 布局 。 下 面 列 出 了 Bootstrap 网 
格 系统 是 如 何 工作 的 : 


行 必须 放置 在 .container class 内 ， 以 便 获 得 适当 的 对 齐 (alignment). P335 
距 (padding) 。 

使 用 行 来 创建 列 的 水 平 组 。 

内 容 应 该 放置 在 列 内 ， 且 唯 有 列 可 以 是 行 的 直接 子 元 素 。 

预定 义 的 网 格 类 ， 比 如 .row 和 .col-xs-4， 可 用 于 快速 创建 网 格 布 局 。LESS 
混合 类 可 用 于 更 多 语义 布局 。 

列 通 过 内 边 距 (padding) 来 创建 列 内 容 之 间 的 间隙。 该 内 边 距 是 通过 .rows 
上 的 外 边 距 (margin) 取 负 ， 表 示 第 一 列 和 最 后 一 列 的 行 偏 移 。 

网 格 系 统 是 通过 指定 您 想 要 横 跨 的 十 二 个 可 用 的 列 来 创建 的 。 例 如 ， 要 创建 三 
个 相等 的 列 ， 则 使 用 三 个 .col-xs-4。 


媒体 查询 
媒体 查询 是 非常 别致 的 "有 条 件 的 CSS 规则 "。 它 只 适用 于 一 些 基于 某 些 规定 条 件 的 
CSS。 如 果 满 足 那些 条 件 ， 则 应 用 相应 的 样式 。 


Bootstrap 中 的 媒体 查询 允许 您 基于 视 口 大 小 移动 、 显 示 并 隐藏 内容。 下 面 的 媒体 
查询 在 LESS 文件 中 使 用 ， 用 来 创建 Bootstrap 网 格 系统 中 的 关键 的 分 界 点 阔 值 。 


/* 超 小 设备 〈 手 机 ， 小 于 768px) */ 
/* Bootstrap 中 默认 情况 下 没有 媒体 查询 */ 


/* 小 型 设备 (平板 电脑 ，768px 起 ) */ 
Qmedia (min-width: Qscreen-sm-min) { ... } 


/* 中 型 设备 (台式 电脑 ，992px 起 ) */ 
Qmedia (min-width: Qscreen-md-min) { ... } 


/* 大 型 设备 (大 台式 电脑 ，1200px 起 ) */ 
Qmedia (min-width: Qscreen-lg-min) { ... } 


我 们 有 时 候 也 会 在 媒体 查询 代码 中 包含 max-width， 从 而 将 CSS 的 影响 限制 在 更 
小 范围 的 屏幕 大 小 之 内 。 


Qmedia (max-width: Qscreen-xs-max) { ... } 
Qmedia (min-width: Qscreen-sm-min) and (max-width: Qscreen-sm-max) 
Qmedia (min-width: Qscreen-md-min) and (max-width: Qscreen-md-max) 
Qmedia (min-width: Qscreen-lg-min) { ... ) 
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媒体 查询 有 两 个 部 分 ， 先 是 一 个 设备 规范 ， 然 后 是 一 个 大 小 规则 。 在 上 面 的 案例 
中 ， 设 置 了 下 列 的 规则 : 


让 我 们 来 看 下 面 这 行 代 码 : 





Qmedia (min-width: Qscreen-sm-min) and (max-width: Qscreen-sm-max) 
1 un 


THUS min-width: Qscreen-sm-min 的 设备 ， 如 果 屏 幕 的 宽度 小 于 
@screen-sm-max， 则 会 进行 一 些 处 理 。 





网 格 选项 


下 表 总 结 了 Bootstrap 网 格 系统 如 何 跨 多 个 设备 工作 : 


超 小 设备 收集 
(«768px) 
3 —ERJCEUS 
最 大 
容器 ”None (auto) 
宽度 
Class dokis: 
BUR o 
2| # 12 
最 大 
列 帘 Auto 
ea | 30px- C421 
TR Bun 
2 15px) 
BIER 
E Yes 
fth Yes 
fT 
列 排 
序 Yes 
基本 的 网 格 结构 


小 型 设备 平板 
电脑 
(2768px) 


DA & 7H, 
断 点 以 上 是 水 
平 的 


750px 


.col-sm- 

12 

60px 

30px (— Tl 
的 每 边 分 别 
15px) 


Yes 
Yes 


Yes 


下 面 是 Bootstrap 网 格 的 基本 结构 : 


«div class-"container"» 


«div class="row"> 
«div class-"col-*-*"»«/div» 
«div class-"col-*-*"»«/div» 


«/div» 
«div class="row">. ..</div> 


</div> 


<div class="container">.... 


让 我 们 来 看 几 个 简单 的 网 格 实例 : 
e 实例 : HA BIKE 


e 实例 : 中 型 和 大 型 设备 


中 型 设备 台式 
电脑 
(2992px) 


以 折 各 开始 ， 
断 点 以 上 是 水 
平 的 


970px 


.col-md- 

12 

78px 

30px (— 7l 
的 每 边 分 别 
15px) 


Yes 
Yes 


Yes 


大 型 设备 台式 
电脑 
(21200px) 


IA 7H, 
断 点 以 上 是 水 
平 的 


1170px 


.Col-lg- 

12 

95px 

30px (一 个 列 
的 每 边 分 别 
15px) 


Yes 
Yes 


Yes 


e 实例 : 手机 、 平 板 电 脑 、 台 式 电 脑 


响应 陈 的 列 重 置 


以 下 实例 包含 了 4 个 网 格 ， 但 是 我 们 在 小 设备 浏览 时 无 法 确定 网 格 显示 的 位 置 。 


为 了 解决 这 个 问题 ， 使 用 可 以 使 用 .clearfix class 和 响应 式 实用 工具 来 解决 ， 如 下 
面 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 响应 式 的 列 重 置 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="container"> 
<div class="row" > 
<div class="col-xs-6 col-sm-3" 
style-"background-color: #dedef8; 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #: 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing el: 
</div> 
<div class="col-xs-6 col-sm-3" 
style="background-color: #dedef8;box-shadow: 
inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing el: 
eiusmod tempor incididunt ut labore et dolore magna al: 
enim ad minim veniam, quis nostrud exercitation ullamc: 
nisi ut aliquip ex ea commodo consequat. 
</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing el: 
eiusmod tempor incididunt ut. 
</p> 
</div> 


<div class="clearfix visible-xs"></div> 


<div class="col-xs-6 col-sm-3" 
style="background-color: #dedef8; 
box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #4: 
<p>Ut enim ad minim veniam, quis nostrud exercitation ull: 
laboris nisi ut aliquip ex ea commodo consequat. 
</p> 
</div> 
<div class="col-xs-6 col-sm-3" 
style="background-color: #dedef8;box-shadow: 
inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 


<p>Lorem ipsum dolor sit amet, consectetur adipisicing el: 
eiusmod tempor incididunt ut labore et dolore magna al: 
enim ad minim 
</p> 
</div> 
</div> 
</div> 


</body> 
</html> 
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浏览 器 上 调整 窗口 大 小 查看 变化 ， 或 在 您 手机 上 查看 效果 。 


偏 移 列 


偏 移 是 一 个 用 于 更 专业 的 布局 的 有 用 功能 。 它 们 可 用 来 给 列 腾 出 更 多 的 空间 。 例 
如 ，.col-xs=* 类 不 支持 偏 移 ， 但 是 它们 可 以 简单 地 通过 使 用 一 个 空 的 单元 格 来 实 
现 该 效果 。 


为 了 在 大 屏幕 显示 器 上 使 用 偏 移 ， 请 使 用 .col-md-offset-* 类 。 这 些 类 会 把 一 个 列 
的 左 外 边 距 (margin) 增加 * 列 ， 其 中 * 范 围 是 从 1 到 11。 


在 下 面 的 实例 中 ， 我 们 有 «div class="col-md-6">..</div>， 我 们 将 使 用 .col-md- 
offset-3 class 来 居中 这 个 div。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 偏 移 列 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js'"»«/script» 
</head> 
<body> 


<div class="container"> 
<h1>Hello, world!</h1> 


<div class="row" > 

<div class="col-xs-6 col-md-offset-3" 
style="background-color: #dedef8;box-shadow: 
inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 

elit. 

</p> 

</div> 


</div> 
</div> 


</body> 
</html> 


-| | 
结果 如 下 所 示 : 


Hello, world! 


Lorem ipsum dolor sè amet. consectelur adipisicing ei 


BERI 


AZ fTEPSAERERESUABSNTS, SXNZUD—ATGXIDBS.row, 3tfft— T G/885.col-md-* 
列 内 添加 一 组 .col-md-* 7l, RREI Aaa, ixiB AA CI BERT 
12 〈 其 实 ， 没 有 要 求 你 必须 占 满 12 列 ) 。 


在 下 面 的 实例 中 ， 布 局 有 两 个 列 ， 第 二 列 被 分 为 两 行 四 个 盒子 。 


<!DOCTYPE html» 

«html» 

«head» 
«title»Bootstrap 实例 - Bu&ESI«/title» 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 


«script src-"/bootstrap/js/bootstrap.min.js'»«/script» 
«/head» 
«body» 


«div class-"container"» 
«hi1»Hello, world!«/hi» 
«div class="row"> 


«div class-z"col-md-3" style-z"background-color: £Zdedef8;box-sl 
inset 1px -1px 1px £444, inset -1px 1px 1px #444;"> 
<h4> 第 一 列 </h4> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing el: 

«/div» 


«div class-z"col-md-9" style-z"background-color: Zdedef8;box-sl 
inset 1px -1px 1px £444, inset -1px 1px 1px #444;"> 
<h4> 第 二 列 - 分 为 四 个 盒子 </h4> 
«div class="row"> 

«div class-z"col-md-6" style-'"background-color: 2ZB18904, 
box-shadow: inset 1px -1px 1px £444, inset -1px 1px 
<p>Consectetur art party Tonx culpa semiotics. Pint: 

assumenda minim organic quis. 
</p> 

</div> 

«div class="col-md-6" style="background-color: #B18904, 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 
<p> sed do eiusmod tempor incididunt ut labore et dı 

aliqua. Ut enim ad minim veniam, quis nostrud ext 
ullamco laboris nisi ut aliquip ex ea commodo cor 
</p> 

</div> 

</div> 


<div class="row"> 
«div class="col-md-6" style="background-color: #B18904, 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 
<p>quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. 
</p> 
</div> 
«div class="col-md-6" style="background-color: #B18904, 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 
<p>Lorem ipsum dolor sit amet, consectetur adipisic: 
sed do eiusmod tempor incididunt ut labore et do: 
aliqua. Ut enim ad minim. </p> 
</div> 
</div> 


</div> 


</div> 
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«/div» 


</body> 
</html> 





图 
结果 如 下 所 示 : 


Hello, world! 
第 一 列 第 二 列 - 分 为 四 个 盒子 


Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. 





列 排序 


Bootstrap 网 格 系统 另 一 个 完美 的 特性 ， 就 是 您 可 以 很 容易 地 以 一 种 顺序 编写 列 ， 
然后 以 另 一 种 顺序 显示 列 。 


您 可 以 很 轻易 地 改变 带 有 .col-md-push-* 和 .col-md-pull-* 类 的 内 置 网 格 列 的 顺 
序 ， 其 中 * 范围 是 从 1 到 11。 


在 下 面 的 实例 中 ， 我 们 有 两 列 布局 ， 左 列 很 窗 ， 作 为 侧 边栏 。 我 们 将 使 用 .col-md- 
push-* 和 .col-md-pull-* 类 来 互 换 这 两 列 的 顺序 。 


Bootstrap 网 格 系统 27 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 列 排序 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'"» 
«script src-z"/scripts/jquery.min.js"»«/script» 
«script src-z"/bootstrap/js/bootstrap.min.js'"»«/script» 
</head> 
<body> 


<div class="container"> 
<h1>Hello, world!</h1> 


<div class="row"> 
<p> 排 序 前 </p> 
«div class="col-md-4" style="background-color: #dedef8; 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px £ 
我 在 左边 
</div> 
<div class="col-md-8" style="background-color: #dedef8; 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #: 
我 在 右边 
</div> 
</div><br> 
<div class="row"> 
<p> 排 序 后 </p> 
<div class="col-md-4 col-md-push-8" 
style-"background-color: Zdedef8; 
box-shadow: inset 1px -1px 1px #444, 
inset -1px 1px 1px #444;"> 
我 在 左边 
</div> 
«div class="col-md-8 col-md-pull-4" 
style-"background-color: Zdedef8; 
box-shadow: inset 1px -1px 1px #444, 
inset -1px 1px 1px #444;"> 
我 在 右边 
«/div» 
«/div» 


«/div» 


«/body» 
«/html» 


[s|pe————))xxxeeeeee : 
结果 如 下 所 示 : 
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Hello, world! 


Bootstrap 网 格 系统 


Bootstrap 排版 


Bootstrap 使 用 Helvetica Neue, Helvetica, Arial 和 sans-serif 作为 其 默认 的 字 
体 栈 。 


使 用 Bootstrap 的 排版 特性 ， 您 可 以 创建 标题 、 段 落 、 列 表 及 其 他 内 联 元 素 。 


标题 
Bootstrap 中 定义 了 所 有 的 HTML 标题 (h1 到 h6) 的 样式 。 请 看 下 面 的 实例 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 标题 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


<h1> 我 是 标题 1 h1</h1> 
<h2> 我 是 标题 2 h2«/h2» 
<h3> 我 是 标题 3 h3</h3> 
<h4> 我 是 标题 4 h4</h4> 
<h5> 我 是 标题 5 h5</h5> 
<h6> 我 是 标题 6 h6</h6> 


</body> 
«/html» 


二 证 "| 
结果 如 下 所 示 : 

我 是 标题 1 h1 

我 是 标题 2 h2 

我 是 标题 3 h3 

我 是 标题 4 h4 


我 是 标题 3 h5 
我 是 标题 6 h6 


内 联 子 标题 


如 果 需 要 向 任何 标题 添加 一 个 内 联 子 标题 ， 只 需要 简单 地 在 元 素 两 旁 添加 
<small>， 或 者 添加 .small class， 这 样子 您 就 能 得 到 一 个 字号 更 小 的 颜色 更 浅 的 文 
本 ， 如 下 面 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 内 联 子 标题 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<h1> 我 是 标题 1 h1\. «small» EB h1</small></h1> 
<h2> 我 是 标题 2 h2\，<small> 我 是 副标题 2 h2</small></h2> 
<h3> 我 是 标题 3 h3N. <small> 我 是 副标题 3 h3</small></h3> 
<h4> 我 是 标题 4 h4\，<small> 我 是 副标题 4 h4</small></h4> 
<h5> 我 是 标题 5 h5N. <small> 我 是 副标题 5 h5</small></h5> 
<h6> 我 是 标题 6 h6N. <small> 我 是 副标题 6 h6</small></h6> 


</body> 
</html> 


[Ba A 
结果 如 下 所 示 : 


我 是 标题 2 h2. : 


我 是 标题 3 h3. 
我 是 标题 4 h4. 
我 是 标题 5 h5. 

我 是 标题 6 h6. ss 


引导 主体 副本 


为 了 给 段落 添加 强调 文本 ， 则 可 以 添加 class="lead"， 这 将 得 到 更 大 更 粗 、 行 高 更 
高 的 文本 ， 如 下 面 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 引导 主体 副本 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 
<hr> 
<h2> 引 导 主 体 副本 </h2> 
«p class="lead"> 这 是 一 个 演示 引导 主体 副本 用 法 的 实例 。 这 是 一 个 演示 引导 主体 副本 | 


</body> 
«/html» 


4] | 
结果 如 下 所 示 : 


引导 主体 副本 

这 是 一 个 演示 引导 主体 副本 用 法 的 实例 。 这 是 一 个 演示 引导 主体 副本 用 法 的 实例 。 这 是 一 个 演示 
引导 主体 副本 用 法 的 实例 。 这 是 一 个 演示 引导 主体 副本 用 法 的 实例 。 这 是 一 个 演示 引导 主体 副本 
用 法 的 实例 。 这 是 一 个 演示 引导 主体 副本 用 法 的 实例 。 这 是 一 个 演示 引导 主体 副本 用 法 的 实例 。 

这 是 一 个 演示 引导 主体 副本 用 法 的 实例 。 
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HTML 的 默认 强调 标签 «small». (设置 文本 为 父 文本 大 小 的 8596) . <strong> ( 设 
转 文 本 为 更 粗 的 文本 ) 、<em> (设置 文本 为 斜体 ) 。 


Bootstrap 提供 了 一 些 用 于 强调 文本 的 类 ， 如 下 面 实 例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 强调 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script src-z"/bootstrap/js/bootstrap.min.js'"»«/script» 
</head> 
<body> 


<small> 本 行内 容 是 在 标签 内 </small><br> 

<strong> 本 行内 容 是 在 标签 内 </strong><br> 

<em> 本 行内 容 是 在 标签 内 ， 并 呈现 为 斜体 </em><br> 

«p class="text-left"> 向 左 对 齐 文本 </p> 

<p class="text-center"> 居 中 对 齐 文本 </p> 

«p class="text-right"> 向 右 对 齐 文本 </p> 

<p class="text-muted"> 本 行内 容 是 减弱 的 </p> 

<p class="text-primary"> 本 行内 容 带 有 一 个 warning class</p> 
<p class="text-success"> 本 行内 容 带 有 一 个 success class</p> 
«p class="text-info"> 本 行内 容 带 有 一 个 info class</p> 

<p class="text-warning"> 本 行内 容 带 有 一 个 warning class</p> 
«p class="text-danger"> 本 行内 容 带 有 一 个 danger class</p> 


</body> 
«/html» 


Rb 车 "| 
结果 如 下 所 示 : 


Hg 5 


HTML <abbr> 元 素 提 供 了 用 于 缩写 的 标记 ， 比 如 WWW 或 HTTP. Bootstrap 定义 
«abbr» 元 素 的 样式 为 显示 在 文本 底部 的 一 条 虚线 边框 ， 当 鼠标 悬 停 在 上 面 时 会 显 

示 完 整 的 文本 (只 要 您 为 «abbr» title 属性 添加 了 文本 ) 。 为 了 得 到 一 个 更 小 字体 

的 文本 ， 请 添加 .initialism 到 «abbr», «/abbr» 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 缩写 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


«abbr title-"World Wide Web">www</abbr><br> 
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr: 


</body> 
</html> 


Aoo B 
结果 如 下 所 示 : 


WWW 
RSS 


地 址 (Address) 


使 用 «address» 标签 ， 您 可 以 在 网 页 上 显示 联系 信息 。 由 于 «address? 默认 为 
display:block;， 您 需要 使 用 标签 来 为 封闭 的 地 址 文本 添加 换行 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 地 址 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<address> 

<strong>Some Company, Inc.</strong><br> 

007 street<br> 

Some City, State XXXXX<br> 

<abbr title="Phone">P:</abbr> (123) 456-7890 
</address> 


<address> 

<strong>Full Name</strong><br> 

«a href="mailto:#">mailto@somedomain .com</a> 
</address> 


</body> 
</html> 


| 
结果 如 下 所 示 : 


Some Company, Inc. 
007 street 

Some City, State XXXXX 
P: (123) 456-7890 


Full Name 


mailtot»somedomai 


引用 (Blockquote) 


您 可 以 在 任意 的 HTML 文本 旁 使 用 默认 的 <blockquote>。 其 他 选项 包括 ， 添 加 一 
个 «small» 标签 来 标识 引用 的 来 源 ， 使 用 class .pull-right 向 右 对 齐 引 用 。 下 面 的 实 
例 演示 了 这 些 特 性 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 引用 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<blockquote><p> 
这 是 一 个 默认 的 引用 实例 。 这 是 一 个 默认 的 引用 实例 。 这 是 一 个 默认 的 引用 实例 。 这 是 一 个 


<blockquote> 这 是 一 个 带 有 源 标题 的 引用 。<small>Someone famous in <cite ti 
«blockquote class="pull-right"> 这 是 一 个 向 右 对 齐 的 引用 。<small>Someone 1 


</body> 
«/html» 


aj | CE 
结果 如 下 所 示 : 





这 是 一 个 默认 的 引用 实例 。 这 是 一 个 默认 的 引用 实例 。 这 是 一 个 默认 的 引用 实例 。 
这 是 一 个 默认 的 引用 实例 。 这 是 一 个 默认 的 引用 实例 。 这 是 一 个 默认 的 引用 实例 。 
这 是 一 个 默认 的 引用 实例 。 这 是 一 个 默认 的 引用 实例 。 


这 是 一 个 带 有 源 标 题 的 引用 .。 


这 是 一 个 向 右 对 齐 的 引用 |。 


列表 


Bootstrap 支持 有 序列 表 、 无 序列 表 和 定义 列表。 


e 有 序列 表 : 有 序列 表 是 指 以 数字 或 其 他 有 序 字 符 开头 的 列表 。 

e 无 序列 表 : 无 序列 表 是 指 没 有 特定 顺序 的 列表 ， 是 以 传统 风格 的 着 重 号 开头 的 
列表 。 如 果 您 不 想 显示 这 些 着 重 号 ， 您 可 以 使 用 class .list-unstyled 来 移 除 祥 
式 。 您 也 可 以 通过 使 用 class .list-inline 把 所 有 的 列表 项 放 在 同一 行 中 。 

e 定义 列表 : 在 这 种 类 型 的 列表 中 ， 每 个 列表 项 可 以 包含 <dt> 和 <dd> 元 素 。 
<dt> 代表 定义 术语 ， 就 像 字 典 ， 这 是 被 定义 的 属于 (或 短语 ) 。 接 着 ，<dd> 
是 <dt> 的 描述 。 您 可 以 使 用 class di-horizontal 把 «dl» 行 中 的 属于 与 描述 并 
排 显 示 。 


下 面 的 实例 演示 了 这 些 类 型 的 列表 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 列表 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js'"»«/script» 
«/head» 
«body» 


<h4> 有 序列 表 </h4> 

«ol» 
«li»Item 1«/li» 
«li»Item 2«/1li» 
«li»Item 3«/li» 
«li»Item 4«/li» 

«/ol» 

<h4> 无 序列 表 </h4> 

«ul» 
«li»Item 1«/li» 
«li»Item 2«/1li» 
«li»Item 3«/li» 
«li»Item 4«/li» 

«/ul» 

<h4> 未 定义 样式 列表 </h4> 

«ul class-"list-unstyled"- 
«li»Item 1«/li» 
«li»Item 2«/1li» 
«li»Item 3«/li» 
«li»Item 4«/li» 

«/ul» 

<h4> 内 联 列 表 </h4> 

«ul class-"list-inline"» 
«li»Item 1«/li» 
«li»Item 2«/1li» 
«li»Item 3«/li» 
«li»Item 4«/li» 

«/ul» 

<h4> 定 义 列表 </h4> 

«dl» 
«dt»Description 1«/dt» 
«dd»Item 1«/dd» 
«dt»Description 2«/dt» 
«dd»Item 2«/dd» 

«/dl» 

<h4> 水 平 的 定义 列表 </h4> 

«dl class-"dl-horizontal"» 
«dt»Description 1«/dt» 
«dd»Item 1«/dd» 
«dt»Description 2«/dt» 
«dd»Item 2«/dd» 

«/dl» 


W3School Bootstrap 教程 


</body> 
</html> 


| 
结果 如 下 所 示 : 
有 序列 表 


1. Item 1 
2. Item 2 
3. Item 3 
4. Item 4 


无 序列 表 


e Item 1 
e Item 2 
e Item 3 
e [tem 4 


未 定义 样式 列表 
Item 1 
Item 2 
Item 3 
Item 4 


内 联 列表 

Item1 Item2 Item3 Item4 
定义 列表 

Description 1 

Item 1 

Description 2 

Item 2 

水 平 的 定义 列表 


Description 1 Item 1 
Description 2 Item 2 


更 多 排版 类 


下 表 提 供 了 Bootstrap 更 多 排版 类 的 实例 : 


>: xh 实 

å ie 例 

党 

.lead 使 段落 突出 显示 A 

一 

.small 设 定 小 文本 (设置 为 父 文本 的 85% 大 小 ) 试 
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.small 


.text-left 


.text-center 


text-right 


text-justify 


.text- 
nowrap 


.text- 
lowercase 


.text- 
uppercase 


.text- 
capitalize 


.initialism 


.blockquote- 
reverse 


设 定 小 文本 (设置 为 父 文本 的 85% 大 小 ) 


设 定 文本 左 对 齐 


设 定 文本 居中 对 齐 


设 定 文本 右 对 齐 


设 定 文本 对 齐 , 段 落 中 超出 屏幕 部 分 文字 自动 换行 


段落 中 超出 屏幕 部 分 不 换行 


设 定 文本 小 写 


设 定单 词 首 字母 大 写 


显示 在 «abbr» 元 素 中 的 文本 以 小 号 字体 展示 


设 定 引用 右 对 齐 


| 


| S | Xue | Xue | xuR | x —b d xmEO vp xEXSEQ—L D XSEv E x*SN- dx 


.list- 
unstyled 


.list-inline 


.dl- 
horizontal 


.pre- 
scrollable 


移 除 默认 的 列表 样式 ， 列 表 项 中 左 对 齐 (<ul> 和 <ol> 
中 )。 这 个 类 仅 适 用 于 直接 子 列表 项 (如 果 需 要 移 除 艇 套 的 
列表 项 ， 你 需要 在 散 套 的 列表 中 使 用 该 样式 ) 


将 所 有 列表 项 放置 同一 行 


该 类 设置 了 浮动 和 偏 移 ， 应 用 于 <d> 元 素 和 «dt» 元 素 
中 ， 具 体 实现 可 以 查看 实例 


使 «pre» 元 素 可 滚动 scrollable 


sl 了 | xw dx) lx 


Bootstrap 代码 


Bootstrap 人 允许 您 以 两 种 方式 显示 代码 : 


e 第 一 种 是 <code> 标签 。 如 果 您 想 要 内 联 显 示人 代码， 那么 您 应 该 使 用 «code» 
e 第 二 种 是 <pre> 标签 。 如 果 代 码 需 要 被 显示 为 一 个 独立 的 块 元 素 或 者 代码 有 多 
行 ， 那 么 您 应 该 使 用 <pre> 标签 。 


请 确保 当 您 使 用 <pre> 和 «code» 标签 时 ， 开 始 和 结束 标签 使 用 了 unicode Z 45 : 
< 和 >。 


让 我 们 来 看 看 下 面 的 实例 : 
实例 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 代码 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<p><code>&lt;header&gt;</code> 作为 内 联 元 素 被 包围 。</p> 
<p> 如 果 需 要 把 代码 显示 为 一 个 独立 的 块 元 素 ， 请 使 用 «pre» 标签 : </p> 
«pre» 

&lt;article&gt; 

&lt;hi1&gt;Article Heading&lt;/hi&gt; 

&lt;/article&gt; 
</pre> 
</body> 
</html> 


E E) 
实例 展示 如 下 图 : 


«header» 作为 内 联 元 素 被 包围 。 
如 果 需 要 把 代码 显示 为 一 个 独立 的 块 元 素 ， 请 使 用 «pre» 标签 : 
«article» 


«hi»Article Heading «/h1» 
«/article» 


Bootstrap 表格 


Bootstrap 提供 了 一 个 清晰 的 创建 表格 的 布局 。 下 表 列 出 了 Bootstrap 支持 的 一 些 表 
格 元 素 : 


标签 描 
<table> 容纳 以 表格 形式 显示 数据 的 元 素 。 
<thead> — 表格 标题 行 的 容器 元 素 («tr») ， 用 来 标识 表格 列 。 
«tbody» ”表格 主体 中 的 表格 行 的 容器 元 素 («m»). 


学 


<tr> 一 组 出 现在 单行 上 的 表格 单元 格 的 容器 元 素 (<td> 或 <th>) 。 
<td> 默认 的 表格 单元 格 。 
ETE 特殊 的 表格 单元 格 ， 用 来 标识 列 或 行 (取决 于 范围 和 位 置 ) 。 必 


须 在 <thead> 内 使 用 。 
<caption> ”关于 表格 存储 内 容 的 描述 或 总 结 。 


基本 的 表格 


如 果 您 想 要 一 个 只 带 有 内 边 距 (padding) 和 水 平分 割 的 基本 表 ， 请 添加 class 
.table， 如 下 面 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 基本 的 表格 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<table class="table"> 
<caption> 基 本 的 表格 布局 </caption> 
<thead> 
«tr» 
<th> 名 称 </th> 
<th> 城 市 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Tanmay</td> 
<td>Bangalore</td> 
</tr> 
<tr> 
<td>Sachin</td> 
<td>Mumbai</td> 
</tr> 
</tbody> 
</table> 


</body> 
«/html» 


Aoo ëO 
结果 如 下 所 示 : 


基本 的 表格 布局 
名 称 城市 


Tanmay Bangalore 


Sachin Mumbai 


可 选 的 表格 类 


除了 基本 的 表格 标记 和 .table class， 还 有 一 些 可 以 用 来 为 标记 定义 样式 的 类 。 下 面 
将 向 您 介绍 这 些 类 。 


条 纹 表格 


通过 添加 .table-striped class， 您 将 在 <tbody> 内 的 行 上 看 到 条 纹 ， 如 下 面 的 实例 
所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 条 纹 表格 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<table class="table table-striped"> 
<caption> 条 纹 表格 布局 </caption> 
<thead> 
<tr> 
<th> 名 称 </th> 
<th> 城 市 </th> 
<th> 密 码 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Tanmay</td> 
<td>Bangalore</td> 
<td>560001</td> 
</tr> 
<tr> 
<td>Sachin</td> 
<td>Mumbai</td> 
<td>400003</td> 
</tr> 
<tr> 
<td>Uma</td> 
<td>Pune</td> 
<td>411027</td> 
</tr> 
</tbody> 
</table> 


</body> 
</html> 


Aoo E" 
结果 如 下 所 示 : 


杀 纹 表格 布局 


BFF 城市 密码 

Tanmay Bangalore 560001 

Sachin Mumbai 400003 

Uma Pune 411027 
边框 表格 


通过 添加 table-bordered class， 您 将 看 到 每 个 元 素 周围 都 有 边框 ， 且 占 整 个 表格 
是 圆 角 的 ， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 边框 表格 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'- 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<table class="table table-bordered"> 
<caption> 边 框 表格 布局 </caption> 
<thead> 
«tr» 
<th> 名 称 </th> 
<th> 城 市 </th> 
<th> 密 码 </th> 
</tr> 
</thead> 
<tbody> 
«tr» 
«td»Tanmay«/td» 
«td»Bangalorec/td» 
«td»560001«/td» 
«/tr» 
«tr» 
«td»Sachin«c/td» 
«td»Mumbai«c/td» 
«td»400903«/td» 
«/tr» 
«tr» 
<td>Uma</ td> 
<td>Pune</td> 
<td>411027</td> 
</tr> 
</tbody> 
</table> 


</body> 
</html> 


二 RE" 
结果 如 下 所 示 : 


边框 表格 布局 


AP 城市 密码 

Tanmay Bangalore 560001 
Sachin Mumbai 400003 
Uma Pune 411027 


AEST 


通过 添加 .table-hover class, 44 X€fe1fríf;. bm AIBxIxKe5sm WFA 
例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - £í4ezxfd&c/title» 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js'"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<table class="table table-hover"> 
<caption> &(&zxf&h«/caption» 
<thead> 
«tr» 
<th> 名 称 </th> 
<th> 城 市 </th> 
<th> 密 码 </th> 
«/tr» 
</thead> 
<tbody> 
«tr» 
«td»Tanmay«/td» 
«td»Bangalorec/td» 
«td»560001«/td» 
«/tr» 
«tr» 
«td»Sachin«c/td» 
«td»Mumbai«c/td» 
«td»400903«/td» 
«/tr» 
«tr» 
<td>Uma</ td> 
<td>Pune</td> 
<td>411027</td> 
</tr> 
</tbody> 
</table> 


</body> 
</html> 


二 RE" 
结果 如 下 所 示 : 


悬 停 表 格 布局 


BFF 城市 密码 
Tanmay Bangalore 560001 
Sachin Mumbai 400003 
Uma Pune 411027 
Æ x 
精简 表格 


通过 添加 .table-condensed class， 行 内 边 距 (padding) 被 切 为 两 半 ， 以 便 让 表 看 
起 来 更 E, 如 下 面 的 实例 所 示 。 :; 这 在 想 让 信 息 看 起 来 更 紧凑 时 非常 有 用 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 精简 表格 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<table class="table table-condensed"> 
<caption> 精 简 表 格 布 局 </caption> 
<thead> 
«tr» 
<th> 名 称 </th> 
<th> 城 市 </th> 
<th> 密 码 </th> 
</tr> 
</thead> 
<tbody> 
«tr» 
«td»Tanmay«/td» 
«td»Bangalorec/td» 
«td»560001«/td» 
«/tr» 
«tr» 
«td»Sachin«c/td» 
«td»Mumbai«c/td» 
«td»400903«/td» 
«/tr» 
«tr» 
<td>Uma</ td> 
<td>Pune</td> 
<td>411027</td> 
</tr> 
</tbody> 
</table> 


</body> 
</html> 


二 RE" 
结果 如 下 所 示 : 


精简 表格 布局 


BFF 城市 密码 

Tanmay Bangalore 560001 
Sachin Mumbai 400003 
Uma Pune 411027 


上 下 文 类 
下 表 中 所 列 出 的 上 下 文 类 人 允许 您 改变 表格 行 或 单个 单元 格 的 背景 颜色 。 


类 描述 
.active 对 某 一 特定 的 行 或 单元 格 应 用 悬 停 颜 色 
.Success 表示 一 个 成 功 的 或 积极 的 动作 
.Warning 表示 一 个 需要 注意 的 警告 
.danger 表示 一 个 危险 的 或 潜在 的 负面 动作 


这 些 类 可 被 应 用 到 <tr>, <td> 或 <th>, 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 上 下 文 类 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script src-z"/bootstrap/js/bootstrap.min.js'"»«/script» 
</head> 
<body> 


<table class="table"> 
<caption> 上 下 文 表格 布局 </caption> 
<thead> 
«tr» 
<th> 产 品 </th> 
<th> 付 款 日 期 </th> 
<th> 状 态 </th> 
</tr> 
</thead> 
<tbody> 
<tr class="active"> 
<td> 产 品 1</td> 
<td>23/11/2013</td> 
<td> 待 发 货 </td> 
</tr> 
<tr class="success"> 
<td> 产 品 2</td> 
<td>10/11/2013</td> 
<td> 发 货 中 </td> 
</tr> 
<tr class="warning"> 
<td> 产 品 3</td> 
<td>20/10/2013</td> 
<td> 待 确认 </td> 
</tr> 
<tr class="danger"> 
<td> 产 品 4</td> 
<td>20/10/2013</td> 
<td> 已 退货 </td> 
</tr> 
</tbody> 
</table> 


</body> 
«/html» 


boo UC -= AA 
结果 如 下 所 示 : 


上 下 文 表格 布局 


产品 付款 日 期 状态 
产品 1 23/11/2013 待 发 货 
产品 2 10/11/2013 发 货 
产品 3 20/10/2013 待 确认 
产品 4 20/10/2013 已 退货 


响应 式 表 格 


通过 把 任意 的 table 包 在 .table-responsive class 内 ， 您 可 以 让 表格 水 平 滚动 以 适 
应 小 型 设备 (小 于 768px) 。 当 在 大 于 768px 宽 的 大 型 设备 上 查看 时 ， 您 将 看 不 到 
任何 的 差别 。 


Ei 


<!DOCTYPE html> 
«html» 
«head» 


«title»Bootstrap 实例 - 响应 式 表格 </title> 


«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 


«script srcz"/scripts/jquery.min.js"»«/script» 
«script src-z"/bootstrap/js/bootstrap.min.js'"»«/script» 


«/head» 
«body» 


«div class-"table-responsive"» 
«table class-"table"» 
<caption> 响 应 式 表格 布局 </caption> 
<thead> 
<tr> 
<th> 产 品 </th> 
<th> 付 款 日 期 </th> 
<th> 状 态 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td> 产 品 1</td> 
<td>23/11/2013</td> 
<td> 待 发 货 </td> 
</tr> 
<tr> 
<td> 产 品 2</td> 
<td>10/11/2013</td> 
<td> 发 货 中 </td> 
</tr> 
<tr> 
<td> 产 品 3</td> 
«td»20/10/2013«/td» 
<td> 待 确认 </td> 
</tr> 
<tr> 
<td> 产 品 4</td> 
<td>20/10/2013</td> 
<td> 已 退货 </td> 
</tr> 
</tbody> 
</table> 
</div> 


</body> 
«/html» 








结果 如 下 所 示 : 


W3School Bootstrap 教程 


响应 陈 表格 布局 
产品 付款 日 期 
产品 1 23/11/2013 
产品 2 10/11/2013 
产品 3 20/10/2013 
产品 4 20/10/2013 


Bootstrap 表格 


Bootstrap 表单 


在 本 章 中 ， 我 们 将 学 习 如 何 使 用 Bootstrap 创建 表单 。Bootstrap 通过 一 些 简单 的 
HTML 标记 和 扩展 的 类 即 可 创建 出 不 同样 式 的 表单 。 


表单 布局 


Bootstrap 提供 了 下 列 类 型 的 表单 布局 : 


e 垂直 表单 (RA) 
e 内 联 表单 
e 水 平 表单 


垂直 或 基本 表单 


基本 的 表单 结构 是 Bootstrap 自 带 的 ， 个 别 的 表单 控件 自动 接收 一 些 全 局 样式 。 下 
面 列 出 了 创建 基本 表单 的 步骤 : 


e 向 父 «form» 元 素 添加 rolez"form", 

e. 把 标签 和 控件 放 在 一 个 带 有 class .form-group 的 «div» 中 。 这 是 获取 最 佳 间 距 
所 必需 的 。 

e 向 所 有 的 文本 元 素 <input>、<textarea> 和 «select» 添加 class .form- 
control, 


<!DOCTYPE html» 

«html» 

«head» 
«title»Bootstrap 实例 - 基本 表单 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 


«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 


<body> 


<form role="form"> 
<div class="form-group"> 
«label forz"name"»4f^«/label» 


«input type="text" class-'"form-control" id-"name" 
placeholder=" 请 输入 名 称 "> 
</div> 


<div class="form-group"> 
«label for="inputfile"> 文 件 输入 </label> 
<input type="file" id="inputfile"> 


«p class="help-block"> 这 里 是 块 级 帮助 文本 的 实例 。</p> 
</div> 


<div class="checkbox"> 
«label» 


«input type-"checkbox"» 请 打 勾 
«/label-» 
«/div» 
«button type="submit" class="btn btn-default"> 提 交 </button> 
</form> 


</body> 
«/html» 


Rb C RI 
结果 如 下 所 示 : 
名 称 


文件 输入 
选择 文件 | 未 选择 文件 
这 里 是 块 级 帮助 文本 的 实例 。 


iBITIS 
提交 


内 联 表 单 


如 果 需 要 创建 一 个 表单 ， 它 的 所 有 元 素 是 内 联 的 ， 向 左 对 齐 的 ， 标 签 是 并 排 的 ， 请 


向 <form> 标签 添加 class .form-inline。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 内 联 表单 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<form class="form-inline" role="form"> 
<div class="form-group"> 
«label class="sr-only" for="name"> 名 称 </label> 
«input type="text" class="form-control" id="name" 
placeholder=" 请 输入 名 称 "> 
</div> 
<div class="form-group"> 
«label class-"sr-only" for="inputfile"> 文 件 输入 </label> 
«input type="file" id="inputfile"> 
</div> 
<div class="checkbox"> 
«label» 
«input type-z"checkbox"» 请 打 勾 
«/label» 
«/div» 
«button type="submit" class="btn btn-default"> 提 交 </button> 
</form> 


</body> 
«/html» 


二 -A 
结果 如 下 所 示 : 











浏览 … | 未 选择 文件 。 请 打 勾 ”提交 





e 默认 情况 下 ，Bootstrap 中 的 input, select 和 textarea 有 10096 宽度 。 在 使 用 
内 联 表 单 时 ， 您 需要 在 表单 控件 上 设置 一 个 宽度 。 
e 使 用 class .sr-only， 您 可 以 隐藏 内 联 表 单 的 标签 。 


水 平 表单 


水 平 表单 与 其 他 表单 不 仅 标 记 的 数量 上 不 同 ， 而 且 表 单 的 呈现 形式 也 不 同 。 如 需 创 
建 一 个 水 平 布局 的 表单 ， 请 按 下 面 的 几 个 步骤 进行 : 


e 向 父 «form» 元 素 添加 class .form-horizontal, 


e. 把 标签 和 控件 放 在 一 个 带 有 class .form-group 的 «div» P. 
e 向 标签 添加 class .control-label, 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 水 平 表 单 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script src-"/bootstrap/js/bootstrap.min.js'"»«/script» 
</head> 
<body> 


<form class="form-horizontal" role="form"> 
<div class="form-group"> 
«label for="firstname" class="col-sm-2 control-label"»4£*£«/1l 
<div class="col-sm-10"> 
<input type="text" class="form-control" id="firstname" 
placeholder=" 请 输入 名 字 "> 
</div> 
</div> 
<div class="form-group"> 
«label for="lastname" class-"col-sm-2 control-label"»7t«/labe 
«div class-"col-sm-10"» 
«input type="text" class-"'"form-control" id-"lastname" 
placeholder=" 请 输入 姓 "> 
</div> 
</div> 
<div class="form-group"> 
<div class="col-sm-offset-2 col-sm-10"> 
<div class="checkbox"> 
«label» 
«input type="checkbox"> 请 记 住 我 
«/label-» 
«/div» 
«/div» 
«/div» 
«div class-"form-group"» 
«div class-z"col-sm-offset-2 col-sm-10'» 
«button type="submit" class="btn btn-default"»€*i«/button 
«/div» 
«/div» 
«/form» 


«/body» 
«/html» 





结果 如 下 所 示 : 











请 记 住 我 





登录 


文 持 的 表单 控件 


Bootstrap XF Ra LIRA, ZÆ input, textarea, checkbox, radio 和 
select, 


输入 框 (Input) 


最 常见 的 表单 文本 字段 是 输入 框 input。 用 户 可 以 在 其 中 输入 大 多 数 必要 的 表单 数 
据 。Bootstrap 提供 了 对 所 有 原生 的 HTML5 的 input 类 型 的 支持 ， 包 括 : text, 
password. datetime、datetime-local、 date, month, time, week. number. 
email url, search. tel 和 color, 3&:4B^ type 声明 是 必需 的 ， 这 样 才 能 让 input 
获得 完整 的 样式 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 输入 框 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«form role="form"> 
«div class-"form-group"» 
«label for="name"> 标 签 </label> 
<input type="text" class="form-control" placeholder=" 文 本 输入 "> 
</div> 
</form> 


</body> 
«/html» 


e =: LA 
结果 如 下 所 示 : 


文本 框 (Textarea) 


当 您 需要 进行 多 行 输入 的 时 ， 则 可 以 使 用 文本 框 textarea。 必 要 时 可 以 改变 rows 
属性 ( 较 少 的 行 = 较 小 的 盒子 ， 较 多 的 行 = 较 大 的 盒子 ) 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 文本 框 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<form role="form"> 
<div class="form-group"> 
«label for="name"> 文 本 框 </labe1l> 
«textarea class="form-control" rows="3"></textarea> 


</div> 
</form> 


</body> 
«/html» 


EA A el 
结果 如 下 所 示 : 
文本 框 


复 选 框 (CheckBoxe) 和 单 选 框 (Radio) 


复 选 框 和 单 选 按 钮 用 于 让 用 户 从 一 系列 预 设置 的 选项 中 进行 选择 。 


e 当 创 建 表单 时 ， 如 果 您 想 让 用 户 从 列表 中 选择 若干 个 选项 时 ， 请 使 用 
checkbox。 如 果 您 限制 用 户 只 能 选择 一 个 选项 ， 请 使 用 radio。 

e 对 一 系列 复 选 框 和 单 选 框 使 用 .checkbox-inline 或 .radio-inline class， 控 制 它 
们 显示 在 同一 行 上 。 


下 面 的 实例 演示 了 这 两 种 类 型 (默认 和 内 联 ) 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 复 选 框 和 单 选 按钮 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«label for="name"> 上 默认 的 复 选 框 和 单 选 按钮 的 实例 </label> 
<div class="checkbox"> 

<label><input type="checkbox" value=""> 选 项 1«/label» 
</div> 
<div class="checkbox"> 

<label><input type="checkbox" value=""> 选 项 2«/label» 
</div> 


<div class="radio"> 
«label» 
«input type="radio" name-"optionsRadios" id-"optionsRadios1i" 
value-"optioni1" checked» 选项 1 
«/label- 
«/div» 
«div class-"radio"» 
«label» 
«input type="radio" name-"optionsRadios" id-"optionsRadios2" 
value-"option2'"» 
选项 2 - 选择 它 将 会 取消 选择 选项 1 
</label> 
</div> 
«label for="name"> 内 联 的 复 选 框 和 单 选 按 钮 的 实例 </labe1l> 
<div> 
<label class="checkbox-inline"> 
«input type="checkbox" id="inlineCheckbox1" value="option1"> 
</label> 
<label class="checkbox-inline"> 
«input type="checkbox" id="inlineCheckbox2" value="option2"> 
</label> 
<label class="checkbox-inline"> 
«input type="checkbox" id="inlineCheckbox3" value="option3"> 
</label> 
<label class="checkbox-inline"> 
«input type="radio" name="optionsRadiosinline" id="optionsRat 
value="option1" checked» 选项 1 
</label> 
«label class="checkbox-inline"> 
«input type="radio" name="optionsRadiosinline" id-"optionsRac 
value-z"option2"» 选项 2 
«/label» 
«/div» 


«/body» 
«/html» 


«| 








结果 如 下 所 示 : 


战 让 的 复 选 框 和 单 选 按钮 的 实例 
选项 1 
选项 2 
选项 1 
选项 2 - 选择 它 将 会 取消 选择 选项 1 
内 联 的 复 选 框 和 单 选 按钮 的 实例 
选项 1 加 选项 2 O 选项 3 9 选项 1 选项 2 


选择 框 (Select) 


当 您 想 让 用 户 从 多 个 选项 中 进行 选择 ， 但 是 默认 情况 下 只 
用 选择 框 。 

e 使 用 «select? 展示 列表 选项 ， 通 常 是 那些 用 户 很 熟悉 
数字 。 


e 使 用 multiple="multiple" 允许 用 户 选 择 多 个 选项 。 


下 面 的 实例 演示 了 这 两 种 类 型 (select 和 multiple) 


55. 
H 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 选择 框 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'- 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<form role="form"> 
<div class="form-group"> 

«label for="name"> 选 择 列表 </1Labe1> 

«select class="form-control"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 

</select> 


«label for="name"> 可 多 选 的 选择 列表 </1Labe1> 

«select multiple class-"form-control"- 
«option»1«/option» 
«option»22«/option» 
«option»3«/option» 
«option»4«/option» 
«option»5«/option» 

«/select» 

«/div» 
«/form» 


«/body» 
«/html» 


eu RE" 
结果 如 下 所 示 : 
选择 列表 


1 Y 


可 多 选 的 选择 列表 


Co N 一 


n5. 
4 


静态 控件 


当 您 需要 在 一 个 水 平 表单 内 的 表单 标签 后 放置 纯 文 本 时 ， 请 在 «p» 上 使 用 class 
.Form-control-static, 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 静态 控件 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<form class="form-horizontal" role="form"> 
<div class="form-group"> 
«label class="col-sm-2 control-label">Email</label> 
«div class="col-sm-10"> 
«p class="form-control-static">email@example .com</p> 
</div> 
</div> 
<div class="form-group"> 
«label for="inputPassword" class="col-sm-2 control-label"2Xsj« 
<div class="col-sm-10"> 
<input type="password" class="form-control" id-z"inputPasswort 
placeholder=" 请 输入 密码 "> 
</div> 
</div> 
</form> 


</body> 
«/html» 


[E] 
结果 如 下 所 示 : 





Email email@example.com 


密码 


表单 控件 状态 


除了 :fcus 状态 〈 即 ， 用 户 点 击 input 或 使 用 tab RES] input 上 ) , Bootstrap 
还 为 禁用 的 输入 框 定义 了 样式 ， 并 提供 了 表单 验证 的 class. 


输入 框 焦点 


Ha AGE input 接收 到 :focus 时 ， 输 入 框 的 轮廓 会 被 移 除 ， 同 时 应 用 box- 
shadow, 


共用 的 输入 框 input 


如 果 您 想 要 禁用 一 个 输入 框 input， 只 需要 简单 地 添加 disabled 属性 ， 这 不 仅 会 禁 
i t 还 会 改变 输入 框 的 样式 以 及 当 妃 标的 指针 甚 停 在 元 素 上 时 妃 标 指针 的 样 
工 vo 


禁用 的 字段 集 fieldset 
对 <fieldset> 添加 disabled 属性 来 禁用 <fieldset> 内 的 所 有 控件 。 


仿 证 状态 


Bootstrap 包含 了 错误 、 和 警告 和 成 功 消息 的 验证 样式 。 只 需要 对 父 元 素 简 单 地 添加 
适当 的 class (.has-warning、 .has-error 或 .has-success) 即 可 使 用 验证 状态 。 


下 面 的 实例 演示 了 所 有 控件 状态 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 表单 控件 状态 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«form class="form-horizontal" role="form"> 
<div class="form-group"> 
«label class-"col-sm-2 control-label"> 聚 焦 </label> 
«div class="col-sm-10"> 
«input class="form-control" id-'"focusedInput" type="text" 
value=" 该 输入 框 获得 焦点 ..."> 
</div> 
</div> 
<div class="form-group"> 
«label for="inputPassword" class="col-sm-2 control-label"> 
RA 
AR HH 
«/label-» 
«div class-'col-sm-10"-» 
«input class-"form-control" id-"disabledInput" typez"text' 
placeholder=" 该 输入 框 禁止 输入 ..." disabled» 
</div> 
</div> 
<fieldset disabled> 
<div class="form-group"> 


«label for-z"disabledTextInput"  class-'"col-sm-2 control-l: 
禁用 输入 (Fieldset disabled) 
«/label-» 
«div class-"col-sm-10"- 
«input type="text" id-'"disabledTextInput" class-'form-« 
placeholder=" 禁 止 输入 "> 
</div> 
</div> 
<div class="form-group"> 
«label for-z"disabledSelect" class="col-sm-2 control-labe: 
禁用 选择 菜单 (Fieldset disabled) 
«/label-» 
«div class-"col-sm-10"- 
«select id-"disabledSelect" class-"form-control"» 
<option> 禁 止 选择 </option> 
</select> 
</div> 
</div> 
</fieldset> 
<div class="form-group has-success"> 
«label class="col-sm-2 control-label" for="inputSuccess"> 
输入 成 功 
</label> 
«div class="col-sm-10"> 
«input type="text" class="form-control" id="inputSuccess": 
</div> 
</div> 
<div class="form-group has-warning"> 
«label class="col-sm-2 control-label" for="inputWarning"> 
输入 警告 
«/label-» 
«div class-"col-sm-10"- 
«input type="text" class-'"form-control" id-"inputWarning": 
«/div» 
«/div» 
«div class-"form-group has-error"> 
«label class-"col-sm-2 control-label" forz'"inputError"» 
输入 错误 
«/label» 
«div class-"col-sm-10"- 
«input type="text" class-"form-control" id="inputError"> 
«/div» 
«/div» 
«/form» 


«/body» 
«/html» 





结果 如 下 所 示 : 


聚焦 该 输入 框 获得 焦点 … 


禁用 输入 
(Fieldset 
disabled ) 


禁用 选择 菜单 禁止 选择 


(Fieldset 
disabled ) 


输入 成 功 a 


输入 警告 | 

















输入 错误 | 





表单 控件 大 小 


您 可 以 分 别 使 用 class .input-Ig 和 .col-Ig-* 来 设置 表单 的 高 度 和 宽度 。 下 面 的 实例 
演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 表单 控件 大 小 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«form role="form"> 
«div class-"form-group"» 
«input class-"form-control input-lg" type="text" 
placeholderz".input-lg"» 
«/div» 


«div class-"form-group"» 
«input class-"form-control" type="text" placeholder=" 默 认输 入 " 
«/div» 


«div class-"form-group"» 
«input class-"form-control input-sm" type="text" 
placeholderz".input-sm"- 
«/div» 
«div class-"form-group"» 
«/div» 


«div class-"form-group"» 
«select class-"form-control input-lg"» 
«option valuez""».input-lg«/option- 
</select> 
</div> 
<div class="form-group"> 
<select class="form-control"> 
<option value=""> 默 认 选 择 </option> 
</select> 
</div> 
<div class="form-group"> 
«select class-"form-control input-sm"> 
«option valuez""».input-sm«/option-» 
</select> 
</div> 


<div class="row"> 
«div class="col-1g-2"> 
<input type="text" class="form-control" placeholder=".col. 
</div> 
<div class="col-1g-3"> 
<input type="text" class="form-control" placeholder=".col. 
</div> 
«div class="col-1g-4"> 
<input type="text" class="form-control" placeholder=".col. 
</div> 
</div> 
</form> 


</body> 
</html> 


El um 8 
结果 如 下 所 示 : 





input-lg | 
里 上 选择 | 


input-sm . 


表单 帮助 文本 


Bootstrap 表单 控件 可 以 在 输入 框 input 上 有 一 个 块 级 帮助 文本 。 为 了 添加 一 个 占用 
整个 宽度 的 内 容 块 ， 请 在 «input» 后 使 用 .help-block。 下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 表单 帮助 文本 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src-z"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<form role="form"> 
<span> 帮 助 文本 实例 </span> 
«input class="form-control" type="text" placeholder=""> 
«span class="help-block"> 一 个 较 长 的 帮助 文本 块 ， 超 过 一 行 ， 
需要 扩展 到 下 一 行 。 本 实例 中 的 帮助 文本 总 共有 两 行 。</span> 
</form> 


</body> 
«/html» 
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结果 如 下 所 示 : 
帮助 文本 交 例 


一 个 较 长 的 帮助 文本 块 ， 超 过 一 行 ， 需要 扩展 到 下 一 行 。 本 实例 中 的 帮助 文本 总 共有 两 行 。 


Bootstrap 表单 
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Bootstrap 按钮 


本 章 将 通过 实例 讲解 如 何 使 用 Bootstrap 按钮 。 任 何 带 有 class .btn 的 元 素 都 会 继 
承 圆 角 灰色 按钮 的 默认 外 观 。 但 是 Bootstrap 提供 了 一 些 选项 来 定义 按钮 的 祥 式 ， 
具体 如 下 表 所 示 : 


Class 描述 
btn 默认 的 /标准 的 按钮 。 
btn- EI Hz Hag £5 ZW = >Q — ral 的 去 
primary 提供 额外 的 视觉 效果 ， 标识 组 按钮 中 的 原始 动作 。 
btn- — L AN EHHA o t GA 
EEE 表示 一 个 成 功 的 或 积极 的 动作 。 
btn-info 信息 警告 消息 的 上 下 文 按 钮 。 
btn- — p oue E BV daz 
warning 表示 应 谨慎 采取 的 动作 。 


btn-danger ”表示 一 个 危险 的 或 潜在 的 负面 动作 。 
ii 并 不 强调 是 一 个 按钮 ， 看 起 来 像 一 个 链接 ， 但 同时 保持 按钮 的 行 


o 


下 面 的 实例 演示 了 上 面 所 有 的 按钮 class : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 按钮 选项 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js'"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


«1-- 标准 的 按钮 - -> 
«button type="button" class="btn btn-defau1lLt"> 默 认 按钮 </button> 


«1-- 提供 额外 的 视觉 效果 ， 标 识 一 组 按钮 中 的 原始 动作 --> 
«button type="button" class="btn btn-primary"> 原 始 按 钮 </button> 


«1-- 表示 一 个 成 功 的 或 积极 的 动作 - -> 
«button type="button" class="btn btn-success"> 成 功 按钮 </button> 


<! s 信息 警告 消息 的 上 下 文 按钮 = 二 之 
«button type="button" class="btn btn-info"> 信 息 按 钮 </button> 


«1-- 表示 应 谨慎 采取 的 动作 --> 
«button type="button" class="btn btn-warning"> 警 告 按钮 </button> 


<!- - 表示 一 个 危险 的 或 潜在 的 负面 动作 - -> 
«button type="button" class="btn btn-danger"> 危 险 按 钮 </button> 


«1-- 并 不 强调 是 一 个 按钮 ， 看 起 来 像 一 个 链接 ， 但 同时 保持 按钮 的 行为 - -> 
«button type="button" class="btn btn-1ink"> 链 接 按钮 </button> 





«/body» 

«/html» 

了 o BRIT 
结果 如 下 所 示 : 

默认 按钮 RIISI a i 广 接 按钮 





按钮 大 小 
下 表 列 出 了 获得 各 种 大 小 按钮 的 class : 


Class 描述 


.btn-lg 这 会 让 按钮 看 起 来 比较 大 。 
.btn-sm 这 会 让 按钮 看 起 来 比较 小 。 
.btn-xs 这 会 让 按钮 看 起 来 特别 小 。 
.btn-block 这 会 创建 块 级 的 按钮 ， 会 横 跨 父 元 素 的 全 部 宽度 。 


下 面 的 实例 演示 了 上 面 所 有 的 按钮 class : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 按钮 大 小 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 


«body» 
«p» 
«button type="button" class="btn btn-primary btn-1g"> 
大 的 原始 按钮 
«/button» 
«button type="button" class="btn btn-default btn-1lg'» 
大 的 按钮 
«/button» 
</p> 
<p> 
<button type="button" class="btn btn-primary"> 
默认 大 小 的 原始 按钮 
«/button» 
«button type="button" class="btn btn-default"» 
默认 大 小 的 按钮 
«/button» 
</p> 
<p> 
<button type="button" class="btn btn-primary btn-sm"> 
小 的 原始 按钮 
«/button» 
«button type="button" class="btn btn-default btn-sm"> 
小 的 按钮 
«/button» 
</p> 
<p> 
<button type="button" class="btn btn-primary btn-xs"> 
特别 小 的 原始 按钮 
«/button» 


«button type="button" class="btn btn-default btn-xs"> 
特别 小 的 按钮 
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«/button» 
«/p» 
«p» 
«button type="button" class="btn btn-primary btn-lg btn-block'"» 
块 级 的 原始 按钮 
</button> 
«button type="button" class="btn btn-default btn-lg btn-block"> 
块 级 的 按钮 
</button> 
«/p» 


</body> 
</html> 


E x D 
结果 如 下 所 示 : 


KÉRT DE 


EE EAA EREA 








PARIR MER 





TES BET SED FEDERE 


RR ESI E S cH 


HR BT TERR 


按钮 状态 

Bootstrap 提供 了 激活 、 禁 用 等 按钮 状态 的 class， 下 面 将 进行 详细 讲解 。 
激活 状态 

按钮 在 激活 时 将 呈现 为 被 按压 的 外 观 〈 深 色 的 背景 、 深 色 的 边框 、 阴 影 ) 。 
下 表 列 出 了 让 按钮 元 素 和 锚 元 素 呈 激活 状态 的 class : 


元 素 Class 
按钮 元 素 添加 .active class 来 显示 它 是 激活 的 。 
锚 元 素 添加 .active class 到 «a» 按钮 来 显示 它 是 激活 的 。 


下 面 的 实例 演示 了 这 点 : 
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<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 按钮 激活 状态 </tit1le> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<p> 
<button type="button" class="btn btn-default btn-lg "> 
默认 按钮 
«/button» 
«button type="button" class="btn btn-default btn-lg active"> 
激活 按钮 
«/button» 
</p> 
<p> 
<button type="button" class="btn btn-primary btn-lg "> 
原始 按钮 
«/button» 
«button type="button" class="btn btn-primary btn-lg active"> 
激活 的 原始 按钮 
«/button» 
</p> 


</body> 
</html> 


El ERI 
结果 如 下 所 示 : 





默认 按钮 | Susie 


原始 按钮 | 激活 的 原始 按钮 


禁用 状态 
当 您 禁用 一 个 按钮 时 ， 它 的 颜色 会 变 淡 50%， 并 失去 渐变 。 
下 表 列 出 了 让 按钮 元 素 和 锚 元 素 呈 禁用 状态 的 class : 





Class 


5t ll 


添加 disabled 属性 到 «button» 按钮 。 


M IST SE 


添加 disabled class 到 «a» "o 注意 : 该 class 只 会 改变 «a» 的 外 
观 ， 不 会 改变 它 的 功能 。 在 这 里 ， 您 需要 使 用 自 定义 的 JavaScript 来 禁 
用 链接 。 


38 ell m 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 按钮 禁用 状态 </tit1le> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src-z"/scripts/jquery.min.js"»«/script» 
«script src-"/bootstrap/js/bootstrap.min.js'"»«/script» 
</head> 
<body> 


<p> 
<button type="button" class="btn btn-default btn-lg"» 
默认 按钮 
«/button» 
«button type="button" class="btn btn-default btn-lg" disabled-'t 
茶 用 按钮 
«/button» 
«/p» 
«p» 
«button type="button" class="btn btn-primary btn-lg "> 
原始 按钮 
«/button» 
«button type="button" class="btn btn-primary btn-lg" disabled-'t 
茶 用 的 原始 按钮 
«/button» 
</p> 
<p> 
<a href="#" class="btn btn-default btn-lg" role="button"> 
链接 
</a> 
<a href="#" class="btn btn-default btn-lg disabled" role="buttor 
禁用 链接 
</a> 
</p> 
<p> 
«a href="#" class="btn btn-primary btn-lg" role="button"> 
原始 链接 
</a> 
«a href="#" class="btn btn-primary btn-lg disabled" role="buttor 
禁用 的 原始 链接 
</a> 
</p> 


</body> 
«/html» 


E M ———————————ÁÀ € ETE 
结果 如 下 所 示 : 











—À 


按钮 标签 


您 可 以 在 «a». «button» 或 «input» 元 素 上 使 用 按钮 class。 但 是 建议 您 在 
«button» 元 素 上 使 用 按钮 class， 避 免 跨 浏览 器 的 不 一 致 性 问题 。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 按钮 标签 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«a class="btn btn-default" href="#" role="button"> 链 接 </a> 
«button class="btn btn-default" typez"submit"»iZ4z«/button» 
«input class="btn btn-default" type="button" value=" 输 入 "> 
«input class="btn btn-default" type="submit" value=" 提 交 "> 


«/body» 
«/html» 


二 人 
结果 如 下 所 示 : 


链接 按钮” 输入 | $23 


Bootstrap 图 像 


在 本 章 中 ， 我 们 将 学 习 Bootstrap 对 图 像 的 支持 。Bootstrap 提供 了 三 个 可 对 图 像 应 
用 简单 样式 的 class : 


e .img-rounded : 添加 border-radius:6px 来 获得 图 像 圆 角 。 
e .img-circle : 添加 border-radius:b00px 来 让 整个 图 像 变 成 圆 形 。 
e .img-thumbnail : 添加 一 些 内 边 距 (padding) 和 一 个 灰色 的 边框 。 


请 看 下 面 的 实例 演示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 图 像 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«img src-"img/download.png" 
classz"img-rounded"» 
«img src-"img/download.png" 

class="img-circle"> 
«img src-"img/download.png" 
class-z"img-thumbnail"» 


«/body» 
«/html» 


Aoo EI 
结果 如 下 所 示 : 


Bootstrap 帮助 器 类 


本 章 将 讨论 Bootstrap 中 的 一 些 可 能 会 派 上 用 场 的 帮助 器 类 。 


关闭 图 标 
使 用 通用 的 关闭 图 标 来 关闭 模 态 框 和 警告 框 。 使 用 class close 得 到 关闭 图 标 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 关闭 图 标 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


<p> 关 闭 图 标 实例 
«button type="button" class-'close" aria-hidden-"'true"» 
&times; 
«/button» 
</p> 


</body> 
</html> 


LIEN L 
结果 如 下 所 示 : 


Close icon Example 


插入 符 


使 用 插入 符 表示 下 拉 功 能 和 方向 。 使 用 带 有 class caret 的 «span» 元 素 得 到 该 功 


Ak 
BB o 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 插入 符 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'- 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<p> 插 入 符 实例 
«span class-"caret'»«/span» 
</p> 


</body> 
</html> 


Sb LA 


结 


插入 符 实例 > 


快速 浮动 


人 尔 
/LN 


例 


E 


可 以 分 别 使 用 class pull-left 或 pull-right 来 把 元 素 向 左 或 向 右 浮动 。 下 面 的 实 
演示 了 这 点 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 快速 浮动 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'- 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 


<body> 

<div class="pull-left"> 
向 左 快速 浮动 

«/div» 


«div class-"pull-right"» 
向 右 快速 浮动 
«/div» 


«/body» 
</html> 








结果 如 下 所 示 : 


Quick Float to left Quick Float to right 


如 需 对 齐 导航 栏 中 的 组 件 ， 请 使 用 .navbar-left 或 .navbar-right 代替 。 请 查看 
Bootstrap 导航 栏 。 


居中 内 容 块 


使 用 class center-block 来 居中 元 素 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 居中 内 容 块 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="row"> 
<div class="center-block" style="width:200px;background-color:# 
这 是 center-block 实例 
«/div» 
«/div» 


«/body» 
«/html» 


LEN EM 
结果 如 下 所 示 : 





这 是 center-block 实 倒 


清除 浮动 


如 需 清除 元 素 的 浮动 ， 请 使 用 .clearfix class. 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 清除 浮动 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js'"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="clearfix" style="background: #D8D8D8;border: 1px soli 
<div class="pull-left" style="background:#58D3F7;"> 





向 左 快速 浮动 
«/div» 
«div class-"pull-right" style-"background: #DA81F5;"> 
向 右 快速 浮动 
«/div» 
«/div» 
«/body» 
«/html» 
E 
结果 如 下 所 示 : 





显示 和 隐 着 内 容 


您 可 以 通过 使 用 class .show 和 .hidden 来 强行 设置 元 素 显示 或 隐藏 (包括 屏幕 阅 
ER). 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 显示 和 隐藏 内 容 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="row" style="padding: 91px 100px 19px 50px;"> 
<div class-"show" style="left-margin:10px;width:300px;backgroun 
这 是 show class 的 实例 
«/div» 
«div class-"hidden" style-"width:200px;background-color:zccc;"» 
这 是 hide class 的 实例 
«/div» 
«/div» 


«/body» 
«/html» 


加 
结果 如 下 所 示 : 





This is an example for show class 


屏幕 阅读 器 


您 可 以 通过 使 用 class .sr-only 来 把 元 素 对 所 有 设备 隐藏 ， 除 了 屏幕 阅读 器 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 屏幕 阅读 器 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div class="row" style="padding: 91px 100px 19px 50px;"> 
«form class-"form-inline" role="form"> 
«div class-"form-group"» 
«label class-"sr-only" for-z"email"»Email 地 址 </label> 
«input type-"email" class-"form-control" placeholder-"Enter t 
«/div» 
«div class-"form-group"» 
«label class-"sr-only" for="pass"> 密 码 </label> 
«input type="password" class="form-control" placeholder="Pas: 
</div> 
</div> 


</body> 
«/html» 





结果 如 下 所 示 : 


在 这 里 ， 我 们 看 到 两 个 input 类 型 的 label 标签 都 带 有 class sr-only， 因 此 标签 将 
只 对 屏幕 阅读 器 可 见 。 


Bootstrap 响应 式 实 用 工具 
Bootstrap 提供 了 一 些 帮 助 器 类 ， 以 便 更 快 地 实现 对 移动 设备 友好 的 开发 。 这 些 可 
以 通过 媒体 查询 结合 大 型 、 小 型 和 中 型 设备 ， 实 现 内 容 对 设备 的 显示 和 隐藏 。 


需要 说 愤 使 用 这 些 工 具 ， 避 免 在 同一 个 站 点 创建 完全 不 同 的 版 本 。 唤 应 式 实用 工具 
目前 只 适用 于 块 和 表 切 换 。 


Class 设备 
.visible-xs 额外 的 小 设备 (小 于 768px) 可 见 
.visible-sm 小 型 设备 (768 px 起 ) 可 见 
.Visible-md 中 型 设备 (768 px 到 991 px) 可 见 
.Visible-lg 大 型 设备 (992 px RAE) 可 见 
.hidden-xs 额外 的 小 设备 (小 于 768px) 隐藏 
.hidden-sm 小 型 设备 (768 px 起 ) 隐藏 
.hidden-md 中 型 设备 (768 px 到 991 px) 隐藏 
.hidden-lg 大 型 设备 (992 px RAE) 隐藏 

打印 类 
下 表 列 出 了 打印 类 。 使 用 这 些 切换 打印 内 容 。 
Class 打印 
.Visible-print 可 见 ， 可 打印 
.hidden-print 只 对 浏览 器 可 见 ， 不 可 打印 


实例 


下 面 的 实例 演示 了 上 面 所 列举 的 帮助 器 类 的 用 法 。 调 整 浏 览 器 的 窗口 大 小 ， 或 者 在 
不 同 的 设备 上 加 载 实 例 ， 测 试 响应 式 实用 工具 类 。 


<!DOCTYPE html> 


«html» 
«head» 
«ti 


tle»Bootstrap 实例 - 响应 式 实用 工具 </title> 


«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 


«sc 
«sc 
«/head 
«body» 


«div c 
«di 


«/div» 


«/body 
«/html 


E rumen 


ript src-"/scripts/jquery.min.js'"»«/script» 
ript srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
> 


lass="container" style="padding: 40px;"> 
v class="row visible-on"> 


«div class="col-xs-6 col-sm-3" style="background-color: 


box-shadow: inset 1px -1px 1px #444, inset -1px 1px 

<span class="hidden-xs"> 特 别 小 型 </span> 

<span class="visible-xs">? 在 特别 小 型 设备 上 可 见 </span> 
</div> 


«div class="col-xs-6 col-sm-3" style="background-color: 


box-shadow: inset 1px -1px 1px #444, inset -1px 1px 
«span class="hidden-sm"> 小 型 </span> 
«span class="visible-sm">? 在 小 型 设备 上 可 见 </span> 
</div> 
<div class="clearfix visible-xs"></div> 


«div class="col-xs-6 col-sm-3" style="background-color: 


box-shadow: inset 1px -1px 1px #444, inset -1px 1px 

«span class="hidden-md"> 中 型 </span> 

<span class="visible-md">? 在 中 型 设备 上 可 见 </span> 
</div> 


«div class="col-xs-6 col-sm-3" style="background-color: 


box-shadow: inset 1px -1px 1px #444, inset -1px 1px 

«span class="hidden-1g"> 大 型 </span> 

«span class="visible-1g">? 在 大 型 设备 上 可 见 </span> 
</div> 


> 
> 
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1px £& 


&dedt 
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结果 如 下 所 示 : 
Tana Es Lem | v3ex9B EUR 
JE (?) 表示 元 素 在 当前 视 口中 可 见 。 


Bootstrap 字形 图 标 (Glyphicons) 


本 章 将 讲解 字形 图 标 (Glyphicons) ， 并 通过 一 些 实例 了 解 它 的 使 用 。Bootstrap 
捆绑 了 200 多 种 字体 格式 的 自行 。 首 先 让 我 们 先 来 理解 一 下 什么 是 字形 图 标 
(Glyphicons) 。 


什么 是 字形 图 标 (Glyphicons) ? 


字形 图 标 (Glyphicons) 是 在 Web 项 目 中 使 用 的 图 标 字体 。 A, Glyphicons 
Halflings 需要 商业 许可 ， 但 是 您 可 以 通过 基于 项 目的 Bootstrap 来 免费 使 用 这 些 图 
标 。 


为 了 表示 对 图 标 作 者 的 感谢 ， 和 希望 您 在 使 用 时 加 上 GLYPHICONS 网 站 的 链接 。 


获取 字形 图 标 (Glyphicons) 


我 们 已 经 在 环境 安装 章节 下 载 了 Bootstrap 3.x 版 本 ， 并 理解 了 它 的 目录 结构 。 在 
fonts 文件 夹 内 可 以 找到 字形 图 标 (Glyphicons) ， 它 包含 了 下 列 这 些 文件 : 


e glyphicons-halflings-regular.eot 
e glyphicons-halflings-regular.svg 
e glyphicons-halflings-regular.ttf 

e glyphicons-halflings-regular.woff 


相关 的 CSS 规则 写 在 dist 文件 夹 内 的 css 文件 夹 内 的 bootstrap.css 和 bootstrap- 
min.css 文件 上 。 


字形 图 标 (Glyphicons) 列表 
点 击 这 里 ， 查 看 可 用 的 字形 图 标 (Glyphicons) 列表 。 
CSS 规则 解释 


下 面 的 CSS 规则 构成 glyphicon class。 


Qfont-face ( 
font-family: 'Glyphicons Halflings'; 
src: url('../fonts/glyphicons-halflings-regular.eot'); 
src: url('../fonts/glyphicons-halflings-regular.eot?Ziefix') forr 


} 


.glyphicon { 
position: relative; 
top: 1px; 
display: inline-block; 
font-family: 'Glyphicons Halflings'; 
-webkit-font-smoothing: antialiased; 
font-style: normal; 
font-weight: normal; 
line-height: 1; 
-moz-osx-font-smoothing: grayscale; 


4d 5 


所 以 font-face 规则 实际 上 是 在 找到 glyphicons 地 方 声明 font-family 和 位 置 。 


.glyphicon class 声明 一 个 从 顶部 偏 移 1px 的 相对 位 置 ， 呈 现 为 inline-block, PBH 
字体 ， 规 定 font-style 和 font-weight 为 normal， 设 置 行 高 为 1。 除 此 之 外 ， 使 用 - 
webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得 跨 


浏览 器 的 一 致 性 。 
然后 ， 这 里 的 





.glyphicon:empty (1 
width: 1em; 
} 


是 空 的 glyphicon。 
这 里 有 200 个 class, & class 针对 一 个 图 标 。 这 些 class 的 常见 格式 如 下 : 


.glyphicon-keyword:before { 
content: "hexvalue"; 


j 


比如 ， 使 用 的 user 图 标 ， 它 的 class 如 下 : 


.glyphicon-user:before ( 
content: "\e008"; 
} 


用 法 


如 需 使 用 图 标 ， 只 需要 简单 地 使 用 下 面 的 代码 即 可 。 请 在 图 标 和 文本 之 间 保 留 适 当 
的 空间 。 


«span class="glyphicon glyphicon-search'"»«/span- 


下 面 的 实例 演示 了 如 何 使 用 字形 图 标 (Glyphicons) 


zj 


<!DOCTYPE html> 

«html» 

«head» 
«title»Bootstrap 实例 - 如 何 使 用 字形 图 标 (Glyphicons) </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 

</head> 

<body> 


<p> 
<button type="button" class="btn btn-default"> 
<span class="glyphicon glyphicon-sort-by-attributes"></span> 
</button> 
«button type="button" class="btn btn-default"> 
«span class="glyphicon glyphicon-sort-by-attributes-alt"»«/s[ 
«/button» 
«button type="button" class="btn btn-default"» 
«span class="glyphicon glyphicon-sort-by-order"»«/span» 
«/button» 
«button type="button" class="btn btn-default"- 
«span class="glyphicon glyphicon-sort-by-order-alt"»«/span» 
«/button» 
</p> 
<button type="button" class="btn btn-default btn-1g"> 
<span class="glyphicon glyphicon-user"></span> User 
</button> 
<button type="button" class="btn btn-default btn-sm"> 
<span class="glyphicon glyphicon-user"></span> User 
</button> 
<button type="button" class="btn btn-default btn-xs"> 
<span class="glyphicon glyphicon-user"></span> User 
</button> 


</body> 
</html> 








结 


吉 果 如 下 所 示 : 


A User User £ User 


带 有 导航 栏 的 字形 图 标 (Glyphicons) 


<!DOCTYPE html» 
«html» 
«head» 
<title> 导 航 栏 的 字形 图 标 </title> 
«meta name="viewport" content="width=device-width, initial-sca: 


«1-- Bootstrap --> 

«link hrefz"http://apps.bdimg.com/libs/bootstrap/3.2.0/css/boot 
«style» 

body ( 


padding-top: 50px; 
padding-left: 50px; 
} 
</style> 
<!--[if lt IE 9]» 
«script src-'"http://apps.bdimg.com/libs/html5shiv/3.7/htmls5sl 
<![endif]--> 
</head> 
<body> 
«div class="navbar navbar-fixed-top navbar-inverse" role-z"navit 
«div class-"container"» 
«div class-"navbar-header'» 
«button type="button" class-"navbar-toggle" data-toggle-' 
«span class-"sr-only"»Toggle navigationc/span-» 
«span classz"icon-bar'»«/span» 
«span class-z"icon-bar'»«/span» 
«span class-"icon-bar"»«/span- 
«/button» 
«a class-"navbar-brand" hrefz'z'"»Project name</a> 
«/div» 
«div class-"collapse navbar-collapse'- 
«ul class="nav navbar-nav"» 
«li class-'active"»«a href="#"><span class="glyphicon ( 
<li><a href="#shop"><span class="glyphicon glyphicon-st! 
<li><a href-'"£Zsupport"»«span class="glyphicon glyphicor 


«/ul» 
«/div»«!-- /.nav-collapse --> 
«/div»«!-- /.container --» 
«/div» 


<!-- jQuery (Bootstrap 插件 需要 引入 ) --» 
«script src-"http://apps.bdimg.com/libs/jquery/2.1.1/jquery.mir 
<!-- 包含 了 所 有 编译 插件 - -> 
«script src-"http://apps.bdimg.com/libs/bootstrap/3.2.0/js/boot 
«/body» 
«/html» 





E | 


定制 字形 图 标 (Glyphicons) 


我 们 已 经 看 到 如 何 使 用 字形 图 标 (Glyphicons) ， 接 下 来 我 们 看 看 如 何 定制 字形 图 
标 (Glyphicons) 。 


W3School Bootstrap 教程 


我 们 将 以 上 面 的 实例 开始 ， 并 通过 改变 字体 尺寸 、 颜 色 和 应 用 文本 阴影 来 进行 定制 
图 标 。 


下 面 是 开始 的 代码 : 
«button type="button" class="btn btn-primary btn-lg"» 


<span class="glyphicon glyphicon-user"></span> User 
</button> 


效果 如 下 所 示 : 





定制 字体 尺寸 
通过 增加 或 减少 图 标的 字体 尺寸 ， 您 可 以 让 图 标 看 起 来 更 大 或 更 小 。 


«button type="button" class="btn btn-primary btn-lg" style="font-s: 
<span class="glyphicon glyphicon-user"></span> User 
</button> 


Ei 





) User 





定制 字体 颜色 


«button type="button" class="btn btn-primary btn-lg" style="color: 
<span class="glyphicon glyphicon-user"></span> User 
</button> 


Ei 
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应 用 文本 阴影 


«button type="button" class="btn btn-primary btn-lg" style-'"text-sl 
<span class="glyphicon glyphicon-user"></span> User 
</button> 


E 





在 线 定制 字形 图 标 (Glyphicons) 


点 击 这 里 ， 在 线 定制 字形 图 标 (Glyphicons) 。 


Bootstrap 下 拉 0 菜单 (Dropdowns) 


本 
接 


实 
如 
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章 将 重点 介绍 Bootstrap 下 拉 菜 单 。 下 拉 菜 单 是 可 切换 的 ， 是 以 列表 格式 显示 链 
的 上 下 文 菜单 。 这 可 以 通过 与 下 拉 菜 单 (Dropdown) JavaScript 插件 的 互动 来 
现 。 


需 使 用 下 列 菜单 ， 只 需要 在 class .dropdown 内 加 上 下 拉 菜 单 即 可 。 下 面 的 实例 
示 了 基本 的 下 拉 菜 单 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 下 拉 菜 单 (Dropdowns) </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="dropdown"> 
<button type="button" class="btn dropdown-toggle" id="dropdownMe 
data-toggle="dropdown"> 
主题 
<span class="caret"></span> 
</button> 
«ul class="dropdown-menu" role="menu" aria-labelledby-'"dropdown! 
«li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#">Java</a> 
</li> 
<li role="presentation"> 
«a role="menuitem" tabindex="-1" href="#"> 数 据 挖掘 </a> 
</li> 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#"> 
数据 通信 /网 络 
</a> 
</li> 
<li role="presentation" class="divider"></li> 
<li role="presentation"> 
«a role="menuitem" tabindex="-1" href="#"> 分 离 的 链接 </a> 
</li> 
</ul> 
</div> 


</body> 
</html> 











结果 如 下 所 示 : 


主题 ~ 


Java 
数据 挖掘 
数据 通信 /网 络 


分 高 的 链接 


B 
Xh 


JE, 


54 
Pes 


通过 向 Eann 添加 class .pull-right 来 向 右 对 齐 下 拉 菜 单 。 下 面 的 实例 
演示 了 这 


Hf [i 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 向 右 对 齐 下 拉 菜 单 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


«div class="dropdown"> 
<button type="button" class="btn dropdown-toggle" id-"dropdownM: 
data-toggle-"dropdown"»i si 
«span class="caret"></span> 
«/button» 
«ul class-"'"dropdown-menu pull-right" role-z"menu" 
aria-labelledby-"dropdownMenui"» 
«li role-z"presentation'"» 
«a role-"menuitem" tabindex-"-1" href="#">Java</a> 
</li> 
<li role="presentation"> 
«a role="menuitem" tabindex="-1" href="#"> 数 据 挖掘 </a> 
</li> 
<li role="presentation"> 
<a role="menuitem" tabindex="-1" href="#"> 
数据 通信 /网 络 
</a> 
</li> 
<li role="presentation" class="divider"></li> 
<li role="presentation"> 
«a role="menuitem" tabindex="-1" href="#"> 分 离 的 链接 </a> 





</li> 
</ul> 
</div> 
</body> 
</html> 
[E mmmmmmm—————— GN 
结果 如 下 所 示 : 
主题 ~ 
Java 
数据 挖掘 
数据 通信 /网 络 





IL. 


标题 


您 可 以 使 用 class dropdown-header 向 下 拉 菜 单 的 标签 区 域 添 加 标题 。 下 面 的 实 
例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 下 拉 菜 单 标题 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="dropdown"> 

<button type="button" class="btn dropdown-toggle" id-"dropdownM: 
data-toggle="dropdown"> 
主题 
«span class="caret"></span> 

«/button» 

«ul class-"'"dropdown-menu" role-z"menu" aria-labelledby-'"dropdown! 
«li role-"presentation" class="dropdown-header"> 下 拉 菜 单 标题 </: 
«li role="presentation" > 

«a role="menuitem" tabindex="-1" href="#">Java</a> 
</li> 
<li role="presentation"> 

«a role="menuitem" tabindex="-1" href="#"> 数 据 挖 握 </a> 
</li> 
<li role="presentation"> 

<a role="menuitem" tabindex="-1" href="#"> 

数据 通信 /网 络 

</a> 
</li> 
<li role="presentation" class="divider"></li> 
«li role="presentation" class="dropdown-header"> 下 拉 菜 单 标题 </: 
«li role="presentation"> 

«a role-"menuitem" tabindex="-1" href="#"> 分 离 的 链接 </a> 
</li> 

</ul> 

</div> 


</body> 
</html> 


DESE = 
结果 如 下 所 示 : 





W3School Bootstrap 教程 


主题 ~ 


下 拉 荣 单 标题 
Java 

数据 挖掘 
数据 通信 /网 络 


下 拉 菜 单 标题 
分 离 的 链接 
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Bootstrap 按钮 组 


按钮 组 允许 多 个 按钮 被 堆 生 在 同一 行 上 。 当 你 想 要 把 按钮 对 齐 在 一 起 时 ， 这 就 显得 
非常 有 用 。 您 可 以 通过 Bootstrap 按钮 (Button) 插件 添加 可 选 的 JavaScript 单 
选 框 和 复 选 框 样式 行为 。 


下 面 的 表格 总 结 了 Bootstrap 提供 的 使 用 按钮 组 的 一 些 重要 的 class : 


.btn-group 


该 class 用 于 形成 基本 的 按钮 组 。 在 .btn-group 中 放置 一 系列 带 有 class .btn 的 按 
钮 。 


&lt;div class-"btn-group"&gt; 
&lt;button type="button" class="btn btn-default'&gt;Buttoni&lt;/l 
&lt;button type="button" class="btn btn-default'"&gt;Button2&lt;, 
&lt;/div&gt; 


El — B 





.btn-toolbar 


该 class 有 助 于 把 几 组 «div class="btn-group"> 结合 到 一 个 <div class="btn- 
toolbar"> 中 ， 一 般 获 得 更 复杂 的 组 件 。 


&lt;div class="btn-toolbar" role="toolbar"&gt; 
&lt;div class-'btn-group'&gt;...&lt;/div&gt; 
&lt;div class-'btn-group'&gt;...&lt;/div&gt; 

&lt;/div&gt; 


.btn-group-lg, .btn-group-sm, .btn-group-xs 


这 些 class 可 应 用 到 整个 按钮 组 的 大 小 调整 ， 而 不 需要 对 每 个 按钮 进行 大 小 调整 。 


&lt;div class="btn-group btn-group-lg'"&gt;...&lt;/div&gt; 
&lt;div class-"btn-group btn-group-sm"&gt;...&lt;/div&gt; 
&lt;div class-"btn-group btn-group-xs"&gt;...&lt;/div&gt; 


.btn-group-vertical 


该 class ib—2B8 42 SEELME 4 zs, TT ARZKGEGÉ & ocn. 


&lt;div class-"btn-group-vertical"&gt; 


&lt;/div&gt; 


基本 的 按钮 组 
下 面 的 实例 演示 了 上 面 表 格 中 讨论 到 的 class .btn-group 的 使 用 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 基本 的 按钮 组 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 
«div class-"btn-group'"» 
«button type="button" class="btn btn-default"»iZ4z 1«/button» 
«button type="button" class="btn btn-default"»iZ4z 2«/button» 
«button type="button" class="btn btn-default"»iZ4z 3«/button» 
«/div» 


«/body» 
«/html» 


Aoo E 
结果 如 下 所 示 : 


按钮 1 按钮 2 按钮 3 


按钮 工具 栏 


下 面 的 实例 演示 了 上 面 表格 中 讨论 到 的 class .btn-toolbar 的 使 用 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 按钮 工具 栏 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="btn-toolbar" role="toolbar"> 
<div class="btn-group"> 
<button type="button" class="btn btn-default"»2iZ4z 1</button> 
<button type="button" class="btn btn-default"»iZ4z 2</button> 
<button type="button" class="btn btn-default"»iZ4z 3</button> 
</div> 
<div class="btn-group"> 
<button type="button" class="btn btn-default"»1Z4z 4</button> 
<button type="button" class="btn btn-default"»iZ4z 5</button> 
<button type="button" class="btn btn-default"»iZ4z 6</button> 
</div> 
<div class="btn-group"> 
<button type="button" class="btn btn-default"»iZ4z 7</button> 
<button type="button" class="btn btn-default"»iZ4z 8</button> 
<button type="button" class="btn btn-default"»iZ4z 9</button> 
</div> 
</div> 


</body> 
</html> 


o ER" 
结果 如 下 所 示 : 


按钮 1 按钮 2 | 按钮 3 按钮 4 按钮 9 按钮 6 按钮 7 按钮 8 按钮 9 


按钮 的 大 小 


下 面 的 实例 演示 了 上 面 表格 中 讨论 到 的 class .btn-group-* 的 使 用 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 按钮 组 的 大 小 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


«div class="btn-group btn-group-lg"» 
«button type="button" class="btn btn-default"»iZ4z 1«/button» 
«button type="button" class="btn btn-default"»iZ4z 2«/button» 
«button type="button" class="btn btn-default"»iZ4z 3«/button» 
«/div» 
«div class-"btn-group btn-group-sm"» 
«button type="button" class="btn btn-default"»iZ4z 4«/button» 
«button type="button" class="btn btn-default"»1Z4z 5«/button» 
«button type="button" class="btn btn-default"»iZ4z 6«/button» 
«/div» 
«div class-"btn-group btn-group-xs"» 
«button type="button" class="btn btn-default"»iZ4z 7«/button» 
«button type="button" class="btn btn-default"»iZ4z 8«/button» 
«button type="button" class="btn btn-default"»iZ4z 9«/button» 
«/div» 


«/body» 
«/html» 


e | 
结果 如 下 所 示 : 


按钮 1 按钮 2 按钮 3 按钮 4 按钮 5  ddHo | 按钮 7 按钮 8 按钮 9 


BUE 


您 可 以 在 一 个 按钮 组 内 柑 套 另 一 个 按钮 组 ， 即 ， 在 一 个 .btn-group 内 嵌 套 另 一 个 
.btn-group 。 当 您 向 让 下 拉 菜 单 与 一 系列 按钮 组 合 使 用 时 ， 就 会 用 到 这 个 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - WEAH 2</title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'- 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


«div class="btn-group"> 
<button type="button" class="btn btn-default"»iZ4z 1</button> 
<button type="button" class="btn btn-default"»iZ4z 2«/button» 


<div class="btn-group"> 
<button type="button" class="btn btn-default dropdown-toggle" 
data-toggle="dropdown"> 
Tl 
«span class-'caret"»«/span» 
«/button» 
«ul class-'dropdown-menu"» 
<li><a href="#"> 下 拉链 接 1«/a»«/li» 
<li><a href="#"> 下 拉链 接 2</a></1i> 
«/ul» 
«/div» 
«/div» 


«/body» 
«/html» 
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结果 如 下 所 示 : 
按钮 1 | 按钮 2 | 下列 


下 拉链 接 1 
下 拉链 接 2 


垂直 的 按钮 组 


下 面 的 实例 演示 了 上 面 表格 中 讨论 到 的 class .btn-group-vertical 的 使 用 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 垂直 的 按钮 组 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="btn-group-vertical"> 
<button type="button" class="btn btn-default"»iZ4z 1</button> 
<button type="button" class="btn btn-default"»iZ4z 2</button> 


<div class="btn-group-vertical"> 
<button type="button" class="btn btn-default dropdown-toggle" 
data-toggle="dropdown"> 
下 拉 
<span class="caret"></span> 
</button> 
«ul class="dropdown-menu"> 
<li><a href="#"> 下 拉链 接 1</a></1i> 
<li><a href="#"> 下 拉链 接 2</a></1i> 
«/ul» 
«/div» 
«/div» 


«/body» 
«/html» 


oo =- -AA 
结果 如 下 所 示 : 

按钮 1 

按钮 2 

下 拉 ~ 


下 拉链 接 1 
Tin 2 


Bootstrap {zin F ius X 
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下 


章 将 讲解 如 何 使 用 Bootstrap class 向 按钮 添加 下 拉 菜 单 。 如 需 向 按钮 添加 下 拉 菜 
， 只 需要 简单 地 在 在 一 个 .btn-group 中 放置 按钮 和 下 拉 菜 单 即 可 。 您 也 可 以 使 
«span class="caret"></span> 来 指示 按钮 作为 下 拉 菜 单 。 


面 的 实例 演示 了 一 个 基本 的 简单 的 按钮 下 拉 菜 单 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 基本 的 按钮 下 拉 菜 单 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«div class-"btn-group'"» 

«button type="button" class="btn btn-default dropdown-toggle" 
data-toggle-"dropdown"» 
默认 «span class-"caret"»«/span» 

«/button» 

«ul class-'dropdown-menu" role="menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
<li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 

</ul> 

</div> 
<div class="btn-group"> 

<button type="button" class="btn btn-primary dropdown-toggle" 
data-toggle="dropdown"> 
原始 <span class="caret"></span> 

</button> 

«ul class="dropdown-menu" role="menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 

</ul> 

</div> 


</body> 
</html> 








结果 如 下 所 示 : 





分 割 的 按钮 下 拉 菜 单 


分 割 的 按钮 下 拉 菜 单 使 用 与 下 拉 菜 单 按钮 大 致 相同 的 样式 ， 但 是 对 下 拉 菜 单 添 加 了 
原始 的 功能 。 分 割 按钮 的 左边 是 原始 的 功能 ， 右 边 是 显示 下 拉 菜 单 的 切换 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 分 割 的 按钮 下 拉 菜 单 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="btn-group"> 
<button type="button" class="btn btn-default"2EA«/button» 
<button type="button" class="btn btn-default dropdown-toggle" 
data-toggle="dropdown"> 
<span class="caret"></span> 
«span class="sr-only"> 切 换 下 拉 菜 单 </span> 
</button> 
«ul class="dropdown-menu" role="menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
«li class-'divider"»«/li» 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«/ul» 
«/div» 
«div class-"btn-group'"» 
«button type="button" class="btn btn-primary"> 原 始 </button> 
«button type="button" class="btn btn-primary dropdown-toggle" 
data-toggle="dropdown"> 
<span class="caret"></span> 
«span class="sr-only"> 切 换 下 拉 菜 单 </span> 
</button> 
«ul class="dropdown-menu" role="menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
<li class-'divider"»«/li» 
«li»«a href="#"> 分 离 的 链接 </a></1i> 
«/ul» 
«/div» 


«/body» 
«/html» 
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结果 如 下 所 示 : 





按钮 下 拉 菜 单 的 大 小 
您 可 以 使 用 带 有 各 种 大 小 按钮 的 下 拉 菜 单 : .btn-large、.btn-sm 或 .btn-xs。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 按钮 下 拉 菜 单 的 大 小 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="btn-group"> 

«button type="button" class="btn btn-default dropdown-toggle btr 
data-toggle-"dropdown'"» 
默认 «span class-"caret"»«/span» 

«/button» 

«ul class-'dropdown-menu" role="menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 

</ul> 

</div> 
<div class="btn-group"> 

<button type="button" class="btn btn-primary dropdown-toggle btr 
data-toggle="dropdown"> 
原始 <span class="caret"></span> 

</button> 

«ul class="dropdown-menu" role="menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 

«/ul» 

«/div» 
«div class-"btn-group'"» 

«button type="button" class="btn btn-success dropdown-toggle btr 
data-toggle-"dropdown"» 

成 功 «span class-'"caret"»«/span» 

«/button» 

«ul class-'dropdown-menu" role="menu"> 
<li><a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 


«/ul» 
«/div» 


</body> 
</html> 
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结果 如 下 所 示 : 








按钮 上 拉 菜 单 


菜单 也 可 以 往 上 拉 伸 的 ， 只 需要 简单 地 向 父 .btn-group 容器 添加 .dropup 即 可 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 按钮 上 拉 菜 单 </tit1le> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js'"»«/script» 
</head> 
<body> 


<div class="row" style="margin-left:50px; margin-top:200px"> 
<div class="btn-group dropup"> 
<button type="button" class="btn btn-default dropdown-toggle' 
data-toggle="dropdown"> 
默认 <span class="caret"></span> 
</button> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#"> é</a></li> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«/ul» 
«/div» 
«div class-"btn-group dropup"» 
«button type="button" class="btn btn-primary dropdown-toggle' 
data-toggle="dropdown"> 
原始 <span class="caret"></span> 
</button> 
<ul class="dropdown-menu" role="menu"> 
<li><a href="#"> é</a></li> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
<li><a href="#"> 其 他 </a></1i> 
<li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«/ul» 
«/div» 
«/div» 


«/body» 
«/html» 





结果 如 下 所 示 : 


W3School Bootstrap 教程 


功能 
另 一 个 功能 
其 他 








分 离 的 链接 
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Bootstrap 输入 框 组 


本 章 将 讲解 Bootstrap 支持 的 另 一 个 特性 ， 输 入 框 组 。 输 入 框 组 扩展 自 表单 控件 。 
使 用 输入 框 组 ， 您 可 以 很 容易 地 向 基于 文本 的 输入 框 添 加 作为 前 级 和 后 级 的 文本 或 
按钮 。 
通过 向 输入 域 添加 前 级 和 后 级 的 内 容 ， 您 可 以 向 用 户 输入 添加 公共 的 元 素 。 例 如 ， 
您 可 以 添加 美元 符号 ， 或 者 在 Twitter 用 户 名 前 添加 @， 或 者 上 应 用 程序 接口 所 需要 
的 其 他 公共 的 元 素 。 
向 .form-control 添加 前 级 或 后 级 元 素 的 步骤 如 下 : 
e 把 前 级 后 后 级 元 素 放 在 一 个 带 有 class .input-group 的 «div» 中 。 
e 接着 ， 在 相同 的 <div> 内 ， 在 class 为 .input-group-addon 的 «span» 内 放 
置 额外 的 内 容 。 
e 把 该 «span» 放置 在 «input» 元 素 的 前 面 或 者 后 面 。 
为 了 保持 跨 浏 览 器 的 兼容 性 ， 请 避免 使 用 <select> 元 素 ， 因 为 它们 在 
WebKit 浏览 器 中 不 能 完全 泻 染 出 效果 。 也 不 要 直接 向 表单 组 应 用 输入 框 组 的 
class， 输 入 框 组 是 一 个 孤立 的 组 件 。 


基本 的 输入 框 组 


下 面 的 实例 演示 了 基本 的 输入 框 组 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 基本 的 输入 框 组 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div style="padding: 100px 100px 10px;"> 
<form class="bs-example bs-example-form" role="form"> 
<div class="input-group"> 
<span class-"input-group-addon"»Q«/span» 
<input type="text" class="form-control" placeholder="twiti 
</div> 
<br> 


<div class="input-group"> 
<input type="text" class="form-control"> 
<span class="input-group-addon">.00</span> 

</div> 

<br> 

<div class="input-group"> 
<span class="input-group-addon">$</span> 
<input type="text" class="form-control"> 
<span class="input-group-addon">.00</span> 





</div> 
</form> 
</div> 
</body> 
</html> 
E E) 
结果 如 下 所 示 : 
@ 
00 
$ 00 


输入 框 组 的 大 小 


您 可 以 通过 向 .input-group 添加 相对 表单 大 小 的 class (比如 .input-group-Ig. 
input-group-sm, input-group-xs) 来 改变 输入 框 组 的 大 小 。 输 入 框 中 的 内 容 会 
自动 调整 大 小 。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 输入 框 组 的 大 小 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js'"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div style="padding: 100px 100px 10px; "> 
<form class="bs-example bs-example-form" role="form"> 
«div class="input-group input-group-1g"> 
<span class="input-group-addon">@</span> 
«input type="text" class="form-control" placeholder="Twiti 
</div><br> 


<div class="input-group"> 

<span class="input-group-addon">@</span> 

«input type="text" class="form-control" placeholder="Twiti 
</div><br> 


<div class="input-group input-group-sm"> 
<span class="input-group-addon">@</span> 
«input type="text" class="form-control" placeholder="Twiti 
</div> 
</form> 
</div> 


</body> 
«/html» 


E 
结果 如 下 所 示 : 





@ 
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您 可 以 把 复 选 框 和 单 选 插件 作为 输入 框 组 的 前 级 或 者 后 级 元 素 ， 如 下 面 的 实例 所 


小 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 输入 框 组 的 复 选 框 和 单 选 插件 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div style="padding: 100px 100px 10px; "> 
<form class="bs-example bs-example-form" role="form"> 
<div class="row"> 
<div class="col-lg-6"> 
<div class="input-group"> 
<span class="input-group-addon"> 
<input type="checkbox"> 


</span> 
<input type="text" class="form-control"> 
</div><!-- /input-group --> 


</div><!-- /.col-lg-6 --><br> 
<div class="col-lg-6"> 
<div class="input-group"> 
<span class="input-group-addon"> 
<input type="radio"> 


</span> 
<input type="text" class="form-control"> 
</div><!-- /input-group --> 
</div><!-- /.col-lg-6 --> 
</div><!-- /.row --> 
</form> 
</div> 
</body> 
</html> 


0 el 
结果 如 下 所 示 : 


按钮 插件 


您 也 可 以 把 按钮 作为 输入 框 组 的 前 级 或 者 后 级 元 素 ， 这 人 1 dci uu .input- 
group-addon class， 您 需要 使 用 class fe boues EE 是 必需 
的 ， 因 为 默认 的 浏览 器 样式 不 会 被 重 宇 。 下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 输入 框 组 的 按钮 插件 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«div style="padding: 100px 100px 10px;"> 
<form class="bs-example bs-example-form" role="form"> 
<div class="row"> 
«div class="col-1g-6"> 
<div class="input-group"> 
<span class="input-group-btn"> 
<button class="btn btn-default" type="button"> 


Go! 
</button> 
</span> 
<input type="text" class="form-control"> 
</div><!-- /input-group --> 


</div><!-- /.col-lg-6 --><br> 
«div class="col-1g-6"> 
<div class="input-group"> 
<input type="text" class="form-control"> 
<span class="input-group-btn"> 
<button class="btn btn-default" type="button"> 


Go! 
</button> 
</span> 
</div><!-- /input-group --> 
</div><!-- /.col-1g-6 --> 
</div><!-- /.row --> 
</form> 

</div> 
</body> 
</html> 


oU es" ] 
结果 如 下 所 示 : 


Go! 


带 有 下 拉 菜 单 的 按钮 


在 输入 框 组 中 添加 带 有 下 拉 菜 单 的 按钮 ， 只 需要 简单 地 在 一 个 .input-group-btn 
class 中 包 右 按钮 和 下 拉 菜 单 即 可 ， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 输入 框 组 的 下 拉 菜 单 按钮 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div style="padding: 100px 100px 10px;"> 
<form class="bs-example bs-example-form" role="form"> 
<div class="row"> 
<div class="col-lg-6"> 
<div class="input-group"> 
<div class="input-group-btn"> 

<button type="button" class="btn btn-default 
dropdown-toggle" data-toggle="dropdown"> 
下 拉 菜 单 
«span class="caret"></span> 

«/button» 

«ul class-'dropdown-menu"» 
«li»«a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
«li»«a href="#"> 其 他 </a></1i> 
«li class="divider"></1i> 
«li»«a href="#"> 分 离 的 链接 </a></1i> 


</ul> 
</div><!-- /btn-group --> 
<input type="text" class="form-control"> 
</div><!-- /input-group --> 


</div><!-- /.col-lg-6 --><br> 
«div class="col-1g-6"> 
«div class="input-group"> 
<input type="text" class="form-control"> 
<div class="input-group-btn"> 
<button type="button" class="btn btn-default 
dropdown-toggle" data-toggle="dropdown"> 
下 拉 菜 单 


«span class="caret"></span> 
«/button» 
«ul class-"dropdown-menu pull-right"» 
«li»«a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
«li»«a href="#"> 其 他 </a></1i> 
«li class="divider"></1i> 
«li»«a href="#"> 分 离 的 链接 </a></1i> 
</ul> 
</div><!-- /btn-group --> 
</div><!-- /input-group --> 
</div><!-- /.col-lg-6 --> 
</div><!-- /.row --> 
</form> 
</div> 


</body> 
</html> 


:| 
结果 如 下 所 示 : 


下 拉 菜 单 ~ 


THES ~ 


分 割 的 下 拉 菜 单 按钮 


在 输入 框 组 中 添加 带 有 下 拉 菜 单 的 分 割 按钮 ， 使 用 与 下 拉 菜 单 按钮 大 致 相同 的 样 
式 ， 但 是 对 下 拉 菜 单 添加 了 主要 的 功能 ， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 输入 框 组 中 分 割 的 下 拉 菜 单 按钮 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div style="padding: 100px 100px 10px; "> 
<form class="bs-example bs-example-form" role="form"> 
<div class="row"> 
<div class="col-lg-6"> 
<div class="input-group"> 
<div class="input-group-btn"> 


«button type="button" class="btn btn-default" 
tabindex="-1"> 下 拉 菜 单 

«/button» 

«button type="button" class="btn btn-default 
dropdown-toggle" data-toggle-"dropdown" tabin: 
«span class-'caret'»«/span» 

«span class="sr-only"> 切 换 下 拉 菜 单 </span> 
</button> 

«ul class="dropdown-menu"> 
«li»«a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
«li»«a href="#"> 其 他 </a></1i> 
«li class="divider"></1i> 
«li»«a href="#"> 分 离 的 链接 </a></1i> 


«/ul» 
«/div»«!-- /btn-group --» 
«input type="text" class-'"form-control"- 
«/div»«!-- /input-group --» 


«/div»«!-- /.col-1lg-6 --»«br» 
«div class-"col-1g-6"'» 
«div class-"input-group'» 
«input type="text" class-"form-control"- 
«div class-"input-group-btn"» 
«button type="button" class="btn btn-default" 
tabindex="-1"> 下 拉 菜 单 
«/button» 
«button type="button" class="btn btn-default 
dropdown-toggle" data-toggle-"dropdown" tabin 
«span class="caret"></span> 
«span class="sr-only"> 切 换 下 拉 菜 单 </span> 
</button> 
<ul class="dropdown-menu pull-right"> 
«li»«a href="#"> 功 能 </a></1i> 
<li><a href="#"> 另 一 个 功能 </a></1i> 
«li»«a href="#"> 其 他 </a></1i> 
«li class="divider"></1i> 
«li»«a href="#"> 分 离 的 链接 </a></1i> 
</ul> 
</div><!-- /btn-group --> 
</div><!-- /input-group --> 
</div><!-- /.col-lg-6 --> 
</div><!-- /.row --> 
</form> 
</div> 


</body> 
</html> 





结果 如 下 所 示 : 
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Bootstrap 导航 元 素 


本 章 我 们 将 讲解 Bootstrap 提供 的 用 于 定义 导航 元 素 的 一 些 选项 。 它 们 使 用 相同 的 
标记 和 基 类 .nav。Bootstrap 也 提供 了 一 个 用 于 共享 标记 和 状态 的 帮助 器 类 。 改 变 
修饰 的 class， 可 以 在 不 同 的 样式 间 进 行 切 换 。 


表格 导航 或 标签 


创建 一 个 标签 式 的 导航 菜单 : 


e 以 一 个 带 有 class .nav 的 无 序列 表 开 始 。 
e 添加 class .nav-tabs。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 标签 式 的 导航 菜单 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


<p> 标 签 式 的 导航 菜单 </p> 
«ul class="nav nav-tabs'» 
«li class-"active"»«a href="#">Home</a></1i> 
<li><a href="#">SVN</a></1i> 
<li><a href="#">i0S</a></1i> 
<li><a hrefz'4"»VB.Net«/a»«/li» 
<li><a href="#">Java</a></1i> 
<li><a hrefz'4"»2PHP«/a»«/li» 
«/ul» 


«/body» 
«/html» 


二 -AA 
结果 如 下 所 示 : 
标签 式 的 导航 菜单 


Home SVN iOS VB.Net Java PHP 


Ai SEGNA Se LAE 3 


ERREA Se LS. A 


如 果 需 要 把 标签 改 成 胶 吉 的 样式 ， 只 需要 使 用 class .nav-pills 代替 .nav-tabs 即 
可 ， 其 他 的 步骤 与 上 面相 同 。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 基本 的 胶 圳 式 导 航 菜 单 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<p> 基 本 的 胶 宫 式 导 航 菜单 </p> 
«ul class="nav nav-pills"» 
«li class-"active"»«a href="#">Home</a></1i> 
<li><a href="#">SVN</a></1i> 
<li><a hrefz'4'"»2i0S«/a»«/li» 
<li><a hrefz'4"»VB.Net«/a»«/li» 
<li><a href="#">Java</a></1i> 
<li><a hrefz'4"»2PHP«/a»«/li» 
«/ul» 


«/body» 
«/html» 


了 EE n] 
结果 如 下 所 示 : 





基本 的 胶囊 式 导 航 菜单 


EB PAL E pe LE Žž 


您 可 以 在 使 用 class .nav、.nav-pills 的 同时 使 用 class .nav-stacked, RAEE 
ES, 


下 面 的 实例 演示 了 这 点 : 


W3School Bootstrap 教程 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - sz&jEB XE E *-c/title» 
«link hrefz'"/bootstrap/css/bootstrap.min.css" rel-'stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 
«p» 3 iE BJ gi SE S, Se LS 3e / p» 
«ul class="nav nav-pills nav-stacked"» 
«li class-"active'»«a href="#">Home</a></1i> 
<li><a hrefz"Z"»SVN«/a»«/li» 
<li><a hrefz"Z"»i0S«/a»«/li» 
<li><a hrefz'Z"»VB.Net«/a»«/li» 
<li><a hrefz"z"»Java«/a»«/li» 
«li»«a href="#">PHP</a></1i> 
</ul> 


</body> 
</html> 


LLL = AA 
结果 如 下 所 示 : 
垂直 的 胶囊 式 导 航 菜 单 


VB.Net 
Java 


PHP 


FR Won] 7r BA] Se RU 

您 可 以 在 屏幕 宽度 大 于 768px 时 ， 通 过 在 分 别 使 用 nav, .nav-tabs 或 
.hav、.nav-pills 的 同时 使 用 class .nav-justified， 让 标签 式 或 胶 圳 式 导 航 菜 单 与 
父 元 素 等 帘 。 在 更 小 的 屏幕 上 上， 导航 链接 会 堆 香 


下 面 的 实例 演示 了 这 点 : 
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<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 两 端 对 齐 的 导航 元 素 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src-z"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<p> 两 端 对 齐 的 导航 元 素 </p> 
«ul class-"nav nav-pills nav-justified"> 
«li class-"active"»«a href="#">Home</a></1i> 
<li><a href="#">SVN</a></1i> 
<li><a hrefz'4'"»2i0S«/a»«/li» 
<li><a hrefz'4"»VB.Net«/a»«/li» 
<li><a hrefz'z'"»Java«c/a»«/li» 
<li><a hrefz'4"»2PHP«/a»«/li» 
«/ul»«br»«br»«br» 


«ul class="nav nav-tabs nav-justified"-» 
«li class-"active"»«a href="#">Home</a></1i> 
<li><a hrefz'4'"»2SVN«/a»«/li» 
<li><a hrefz'4'"»2i0S«/a»«/li» 
<li><a hrefz'4"»VB.Net«/a»«/li» 
<li><a hrefz'z'"»Java«c/a»«/li» 
<li><a hrefz"£Z"»5PHP«/a»«/li» 
«/ul» 


«/body» 
«/html» 


El uum 多 "| 
结果 如 下 所 示 : 


两 端 对 齐 的 导航 元 素 





Home SVN iOS VB.Net Java PHP 


茶 用 链接 


对 每 个 .nav class， 如 果 添 加 了 .disabled class， 则 会 创建 一 个 灰色 的 链接 ， 同 时 
禁用 了 该 链接 的 hover 状态 ， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 导航 元 素 中 的 禁用 链接 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src-z"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<p> 导 航 元 素 中 的 禁用 链接 </p> 
«ul class-"nav nav-pills"> 
«li class-"active"»«a href="#">Home</a></1i> 
<li><a href="#">SVN</a></1i> 
«li class-"disabled'"»«a href="#">i0S (禁用 链接 ) «/a»«/li» 
<li><a hrefz'4"»VB.Net«/a»«/li» 
<li><a hrefz'z'"»Java«c/a»«/li» 
<li><a hrefz'4"»2PHP«/a»«/li» 
«/ul»«br»«br» 


«ul class="nav nav-tabs'» 
«li class-"active"»«a href="#">Home</a></1i> 
<li><a hrefz'£Z'"»SVN«/a»«/li» 
<li><a href="#">i0S</a></1i> 
«li class-"disabled"»«a href="#">VB.Net (禁用 链接 ) «/a»«/li» 
<li><a href="#">Java</a></1i> 
<li><a hrefz'4"»2PHP«/a»«/li» 
«/ul» 


«/body» 
«/html» 


1 — —— Bi 
结果 如 下 所 示 : 
导航 元 素 中 的 禁用 链接 





Home SVN S FHUSIZ VB.Net Java PHP 


Home SVN OS 本 FH Java PHP 


该 class 只 会 改变 «a» 的 外 观 ， 不 会 改变 它 的 功能 。 在 这 里 ， 您 需要 使 用 自 
定义 的 JavaScript 来 禁用 链接 。 


下 拉 有 菜单 


导航 菜单 与 下 拉 菜 单 使 用 相似 的 语法 。 黑 认 情 况 下 ， 列 表 项 的 锚 与 一 些 数据 属性 协 
同 合作 来 触发 带 有 .dropdown-menu class 的 无 序列 表 。 


带 有 下 拉 菜 单 的 标签 
向 标签 添加 下 拉 菜单 的 步骤 如 下 : 


e 以 一 个 带 有 class .nav 的 无 序列 表 开 始 。 
e。 添 加 class .nav-tabs。 


。 添加 带 有 .dropdown-menu class 的 无 序列 表 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 带 有 下 拉 菜 单 的 标签 </tit1e> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script src-z"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<p> 带 有 下 拉 菜 单 的 标签 </p> 
«ul class="nav nav-tabs'» 
«li class="active"><a href="#">Home</a></1i> 
<li><a href="#">SVN</a></1i> 
<li><a href="#">i0S</a></1i> 
<li><a href="#">VB.Net</a></1i> 
«li class="dropdown"> 
«a class-"dropdown-toggle" data-toggle-"dropdown" href="#"> 
Java «span class-'caret'»«/span» 
</a> 
«ul class="dropdown-menu"> 
«li»«a href="#">Swing</a></1i> 
<li><a href="#">jMeter</a></1i> 
<li><a href="#">EJB</a></li> 
<li class="divider"></li> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«/ul» 
</li> 
<li><a href="#">PHP</a></li> 
</ul> 


</body> 
</html> 


o0 -= LA 
结果 如 下 所 示 : 


带 有 下 拉 菜 单 的 标签 


Home SVN iOS VB.Net Java ~ PHP 


Swing 
jMeter 
EJB 


分 离 的 链接 


wA PARAIRE 


步骤 与 创建 带 有 下 拉 菜 单 的 标签 相同 ， 只 是 需要 把 .nav-tabs class 改 为 .nav- 
pills， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 带 有 下 拉 菜 单 的 胶 圳 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<p> REGÉBJEHEEC/p» 
<ul class="nav nav-pills"> 
«li class="active"><a href="#">Home</a></li> 
<li><a href="#">SVN</a></li> 
<li><a href="#">i0S</a></li> 
<li><a href="#">VB.Net</a></li> 
<li class="dropdown"> 
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
Java <span class="caret"></span> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">Swing</a></li> 
<li><a href="#">jMeter</a></li> 
<li><a href="#">EJB</a></li> 
<li class="divider"></li> 
<li><a href="#"> 分 离 的 链接 </a></1i> 





«/ul» 
</li> 
<li><a href="#">PHP</a></li> 
</ul> 
</body> 
</html> 
| — WE 
结果 如 下 所 示 : 
带 有 个 拉 菜 单 的 胶 圳 
Home SVN iOS VB.Net Java ~ PHP 
Swing 
jMeter 
EJB 


分 离 的 链接 


Bootstrap 导航 栏 


导航 栏 是 一 个 很 好 的 功能 ， 是 Bootstrap 网 站 的 一 个 突出 特点 。 导 航 栏 是 响应 式 元 
组 件 就 ， 作 为 应 用 程序 或 网 站 的 导航 标题 。 导 航 栏 在 移动 设备 的 视图 中 是 折 和 县 的 ， 

随 着 可 用 视 口 宽度 的 增加 ， 导 航 栏 也 会 水 平展 开 。 在 Bootstrap 导航 栏 的 核心 中 ， 

导航 栏 包括 了 为 站 点 名 称 和 基本 的 导航 定义 样式 。 


默认 的 导航 栏 


创建 一 个 默认 的 导航 栏 的 步骤 如 下 : 


e 向 «nav» 标签 添加 class .navbar、.navbar-default。 

向 上 面 的 元 素 添加 role="navigation"， 有 助 于 增加 可 访问 性 。 

e 向 «div» 元 素 添加 一 个 标题 class .navbar-header， 内 部 包含 了 带 有 class 
navbar-brand 的 «a» 元 素 。 这 会 让 文本 看 起 来 更 大 一 号 。 

e 为 了 向 导航 栏 添 加 链接 ， 只 需要 简单 地 添加 带 有 class .nav、.navbar-nav 的 
无 序列 表 即 可 。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 默认 的 导航 栏 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script src-z"/bootstrap/js/bootstrap.min.js'»«/script» 
</head> 
<body> 


<nav class="navbar navbar-default" role="navigation"> 
«div class="navbar -header "> 
<a class="navbar-brand" href="#">W3Cschool</a> 
</div> 
<div> 
<ul class="nav navbar-nav"> 
«li class="active"><a href="#">i0S</a></1i> 
<li><a href="#">SVN</a></li> 
<li class="dropdown"> 
«a href="#" class="dropdown-toggle" data-toggle-"dropa: 
Java 
<b class="caret"></b> 
</a> 
«ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></li> 
<li><a href="#">EJB</a></li> 
<li><a href="#">Jasper Report</a></li> 
<li class="divider"></li> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
«/ul» 
</li> 
</ul> 
</div> 
</nav> 


</body> 
</html> 





结果 如 下 所 示 : 


W3Cschool iOS SVN Java ~ 


响应 式 的 导航 栏 


X r6 3a xIuBRME, fm329rpd BAESOWUD A SHETES A classes 

collapse. .navbar-collapse 的 «div» 中 。 折 受 起 来 的 导航 栏 实际 上 是 一 个 带 有 

class .navbar-toggle 及 两 个 data- 元 素 的 按钮 。 第 一 个 是 data-toggle， 用 于 告诉 

JavaScript 需要 对 按钮 做 什么 ， 第 二 个 是 data-target， 指 示 要 切换 到 哪 一 个 元 素 。 

三 个 带 有 class .icon-bar 的 <span> 创建 所 谓 的 汉堡 按钮 。 这 些 会 切换 为 .nav- 

collapse «div» 中 的 元 素 。 为 了 实现 以 上 这 些 功能 ， 您 必须 包含 Bootstrap Jr & 
(Collapse) 插件 。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 响应 式 的 导航 栏 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script src-z"/bootstrap/js/bootstrap.min.js'»«/script» 
</head> 
<body> 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar -header "> 
<button type="button" class="navbar-toggle" data-toggle="col: 
data-target="#example-navbar-collapse"> 
«span class="sr-only"> 切 换 导 航 </span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
«a class-"navbar-brand" href="#">W3Cschool</a> 
«/div» 
«div class-"collapse navbar-collapse" id-'example-navbar-collap: 
«ul class="nav navbar-nav'» 
«li class-'"active'»«a href="#">i0S</a></1i> 
<li><a href="#">SVN</a></1i> 
«li class="dropdown"> 
«a href="#" class-'"dropdown-toggle" data-toggle-"dropat 
Java «b class="caret"></b> 
«/a» 
«ul class-z"dropdown-menu"» 
«li»«a href="#">jmeter</a></1i> 
«li»«a href="#">EJB</a></1i> 
<li><a href="#">Jasper Report«/a»«/li» 
<li class-'"divider"»«/li» 
«li»«a href="#"> 分 离 的 链接 </a></1i> 
<li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
«/ul» 
</li> 
</ul> 
</div> 
</nav> 


</body> 
</html> 


E A : 
结果 如 下 所 示 : 





W3GCschool 


Java v 


导航 栏 中 的 表单 


导航 栏 中 的 表单 不 是 使 用 Bootstrap 表单 章节 中 所 讲 到 的 默认 的 class， 它 是 使 用 
.navbar-form class。 这 确保 了 表单 适当 的 垂直 对 齐 和 在 较 窒 的 视 口中 折 和 县 的 行 


为 
的 


下 


到 


。 使 用 对 章 方式 选项 〈 这 将 在 组 件 对 齐 方式 部 分 进行 详细 讲解 ) 来 决定 导航 栏 中 
内 容 放 置 在 哪里 。 


面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 导航 栏 中 的 表单 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«nav class-"navbar navbar-default" role-z"navigation'» 

«div class-'navbar-header'» 

«a class-'"navbar-brand" href="#">W3Cschool</a> 
«/div» 
«div» 

«form class-'"navbar-form navbar-left" rolez"search'» 

«div class-"form-group"» 
«input type="text" class-'"form-control" placeholder-z"St 


«/div» 
«button type="submit" class="btn btn-default"> 提 交 </button 
</form> 
</div> 
</nav> 
</body> 
«/html» 











结果 如 下 所 示 : 


W3Cschool 提交 


导航 栏 中 的 按钮 


您 可 以 使 用 class .navbar-btn 向 不 在 «form» 中 的 «button» 元 素 添加 按钮 ， 按 钮 
在 导航 栏 上 垂直 居中 。.navbar-btn 可 被 使 用 在 <a> 和 «input» 元 素 上 。 


不 要 在 .navbar-nav 内 的 «a» 元 素 上 使 用 .navbar-btn， 因 为 它 不 是 标准 的 
button class。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 导航 栏 中 的 按钮 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«nav class-"navbar navbar-default" role-z"navigation'"» 
«div class-"navbar-header'» 
«a class-"navbar-brand" href="#">W3Cschool</a> 
«/div» 
«div» 
«form class-"navbar-form navbar-left" rolez"search'» 
«div class-"form-group"» 
«input type="text" class-"form-control" placeholder-'S: 
«/div» 
«button type="submit" class="btn btn-default"> 提 交 按 钮 </but 
</form> 
«button type="button" class="btn btn-default navbar-btn"> 
导航 栏 按钮 
«/button» 
«/div» 
«/nav» 


«/body» 
«/html» 


Sc 人 
结果 如 下 所 示 : 





W3Cschool 提交 按钮 导航 栏 按钮 


导航 栏 中 的 文本 


如 果 需 要 在 导航 中 包含 文本 字符 串 ， 请 使 用 class .navbar-text。 这 通常 与 <p> 标 
签 一 起 使 用 ， 确 保 适 当 的 前 导 和 颜色 。 下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 导航 栏 中 的 文本 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar -header "> 
<a class="navbar-brand" href="#">W3Cschool</a> 
</div> 
<div> 
<p class="navbar-text">Signed in as Thomas</p> 
</div> 
</nav> 


</body> 
</html> 


4 o Bib 
结果 如 下 所 示 : 


/3Cschool Signed in as Thomas 


非 导 航 链 接 


如 果 您 不 想 在 常规 的 导航 栏 导航 组 件 内 使 用 标准 的 链接 ， 那 么 请 使 用 class 
navbar-link 来 为 默认 的 和 倒转 的 导航 栏 选 项 添加 适当 的 颜色 ， 如 下 面 的 实例 所 
小 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 非 导 航 链接 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script src-z"/bootstrap/js/bootstrap.min.js'"»«/script» 
</head> 
<body> 


<nav class="navbar navbar-default" role="navigation"> 
«div class="navbar -header "> 
<a class="navbar-brand" href="#">W3Cschool</a> 
</div> 
<div> 
<p class="navbar-text navbar-right">Signed in as 
<a href="#" class="navbar -link">Thomas</a> 
</p> 
</div> 
</div> 


</body> 
</html> 


E -= 
结果 如 下 所 示 : 


W3Cschool Signed in as Thomas 


组 件 对 齐 方式 


您 可 以 使 用 实用 工具 class .navbar-left 或 .navbar-right 向 左 或 向 右 对 齐 导航 栏 中 
的 导航 链接 、 表 单 、 按 钮 或 文本 这 些 组 件 。 这 两 个 class 都 会 在 指定 的 方向 上 添加 
CSS 浮动 。 下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 组 件 对 齐 方式 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<nav class="navbar navbar-default" role="navigation"> 
«div class="navbar-header"> 
<a class="navbar-brand" href="#">W3Cschool</a> 


«/div» 
«div» 
<! - -向 左 对 齐 --> 
«ul class="nav navbar-nav navbar-left"» 
<li class="dropdown"> 
«a href="#" class-'"dropdown-toggle" data-toggle-'dropat 
Java 
«b classz-"caret'»«/b» 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></li> 
<li><a href="#">EJB</a></li> 
<li><a href="#">Jasper Report</a></li> 
<li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
</ul> 
</li> 
</ul> 
<form class="navbar-form navbar-left" role="search"> 
<button type="submit" class="btn btn-default"> 
向 左 对 齐 -提交 按钮 
«/button» 
</form> 
«p class-"navbar-text navbar-1Left"> 向 左 对 齐 -文本 </p> 
<!- -向 右 对 齐 - -> 
«ul class="nav navbar-nav navbar-right"> 
<li class="dropdown"> 
«a href="#" class-'dropdown-toggle" data-toggle-"dropat 
Java «b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></li> 
<li><a href="#">EJB</a></li> 
<li><a href="#">Jasper Report</a></li> 
«li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
</ul> 
</li> 
</ul> 
<form class="navbar-form navbar-right" role="search"> 
<button type="submit" class="btn btn-default"> 
向 右 对 齐 -提交 按钮 


</button> 
</form> 
«p class-"navbar-text navbar-right"> 向 右 对 齐 -文本 </p> 
</div> 
</nav> 


</body> 


«/html» 














mm 
结果 如 下 所 示 : 
W3Cschool Java ~ 向 左 对 齐 -提交 按钮 向 左 对 齐 -文本 向 右 对 齐 - 文 本 向 右 对 齐 - 提 交 按 钮 Java ~ 
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固定 到 顶部 


Bootstrap 导航 栏 可 以 动态 定位 。 默 认 情 况 下 ， 它 是 块 级 元 素 ， 它 是 基于 在 HTML 
中 放置 的 位 置 定位 的 。 通 过 一 些 帮 助 器 类 ， 您 可 以 把 它 放 置 在 页 面 的 顶部 或 者 底 
部 ， 或 者 您 可 以 让 它 成 为 随 着 页 面 一 起 滚动 的 静态 导航 栏 。 


如 果 您 想 要 让 导航 栏 固 定 在 页 面 的 顶部 ， 请 向 .navbar class 添加 class .navbar- 
fixed-top。 下 面 的 实例 演示 了 这 点 : 


为 了 防止 导航 栏 与 页 面 主体 中 的 其 他 内 容 的 顶部 相交 错 ， 请 向 <body> 标签 
添加 至 少 50 像素 的 内 边 距 (padding) ， 内 边 距 的 值 可 以 根据 您 的 需要 进行 设 


/ 


[E 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 固定 到 顶部 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script src-z"/bootstrap/js/bootstrap.min.js'"»«/script» 
</head> 
<body> 


«nav class="navbar navbar-default navbar-fixed-top" role="navigati( 
«div class="navbar -header "> 
<a class="navbar-brand" href="#">W3Cschool</a> 
</div> 
<div> 
<ul class="nav navbar-nav"> 
«li class="active"><a href="#">i0S</a></1i> 
<li><a href="#">SVN</a></li> 
<li class="dropdown"> 
«a href="#" class="dropdown-toggle" data-toggle-"dropa: 
Java <b class="caret"></b> 
</a> 
«ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></li> 
<li><a href="#">EJB</a></li> 
<li><a href="#">Jasper Report</a></li> 
<li class="divider"></li> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
«/ul» 
</li> 
</ul> 
</div> 
</nav> 


</body> 
</html> 


[E E) 
结果 如 下 所 示 : 





W3Cschool iOS SVN Java ~ 


固定 到 底部 


如 果 您 想 要 让 导航 栏 固 定 在 页 面 的 底部 ， 请 向 navbar class 添加 class .navbar- 
fixed-bottom。 下面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 固定 到 底部 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«nav class-"navbar navbar-default navbar-fixed-bottom" role-"navig: 
«div class-'navbar-header'-» 
«a class-'"navbar-brand" href="#">W3Cschool</a> 
«/div» 
«div» 
«ul class="nav navbar-nav'» 
«li class-'"active"»«a href="#">i0S</a></1i> 
<li><a href="#">SVN</a></li> 
<li class="dropdown"> 
«a href="#" class="dropdown-toggle" data-toggle-"dropdt 
Java <b class="caret"></b> 
</a> 
«ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></li> 
<li><a href="#">EJB</a></li> 
<li><a href="#">Jasper Report</a></li> 
<li class="divider"></li> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
«/ul» 
</li> 
</ul> 
</div> 
</nav> 


</body> 
</html> 


[i| E) 
结果 如 下 所 示 : 





W3Cschool iOS SVN Java a 


静态 的 顶部 


如 需 创建 能 随 着 页 面 一 起 滚动 的 导航 栏 ， 请 添加 .navbar-static-top class。 该 
class 不 要 求 向 «body» 添加 内 边 距 (padding) 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 静态 的 顶部 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«nav class-"navbar navbar-default navbar-static-top" role="navigat: 
«div class-'navbar-header'» 
«a class-'"navbar-brand" href="#">W3Cschool</a> 
«/div» 
«div» 
«ul class="nav navbar-nav'» 
«li class="active"><a href="#">i0S</a></1i> 
<li><a href="#">SVN</a></li> 
<li class="dropdown"> 
«a href="#" class="dropdown-toggle" data-toggle-"dropa: 
Java <b class="caret"></b> 
</a> 
«ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></li> 
<li><a href="#">EJB</a></li> 
<li><a href="#">Jasper Report</a></li> 
<li class="divider"></li> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
«/ul» 
</li> 
</ul> 
</div> 
</nav> 


</body> 
</html> 





结果 如 下 所 示 : 


W3Cschool iOS SVN Java ~ 


倒置 的 导航 栏 


为 了 创建 一 个 带 有 黑色 背景 白色 文本 的 倒置 的 导航 栏 ， 只 需要 简单 地 向 .navbar 
class 添加 .navbar-inverse class 即 可 ， 如 下 面 的 实例 所 示 : 


为 了 防止 导航 栏 与 页 面 主 体 中 的 其 他 内 容 的 顶部 相交 错 ， 请 向 «body» 标签 
添加 至 少 50 像素 的 内 边 距 (padding) ， 内 边 距 的 值 可 以 根据 您 的 需要 进行 设 
[E 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 倒置 的 导航 栏 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«nav class-"navbar navbar-inverse" rolez"navigation'» 
«div class-'navbar-header'» 
«a class-'"navbar-brand" href="#">W3Cschool</a> 
«/div» 
«div» 
«ul class="nav navbar-nav'» 
«li class-"active"»«a href="#">i0S</a></1i> 
<li><a hrefz'Z'"»SVN«/a»«/li» 
«li class="dropdown"> 
«a href="#" class-'"dropdown-toggle" data-toggle-"dropa: 
Java «b class-'caret'»«/b» 
</a> 
«ul class="dropdown-menu"> 
<li><a href="#">jmeter</a></li> 
<li><a href="#">EJB</a></li> 
<li><a href="#">Jasper Report</a></li> 
<li class="divider"></li> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
«/ul» 
</li> 
</ul> 
</div> 
</nav> 


</body> 
</html> 
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结果 如 下 所 示 : 








Bootstrap ii ig $5 (Breadcrumbs) 


面包 屑 导航 (Breadcrumbs) 是 一 种 基于 网 站 层次 信息 的 显示 方式 。 以 博客 为 例 ， 
面包 层 导 航 可 以 显示 发 布 日 期 、 类 别 或 标签 。 它 们 表示 当前 页 面 在 导航 层次 结构 内 
的 位 置 。 


Bootstrap PHEA% (Breadcrumbs) 是 一 个 简单 的 带 有 .breadcrumb class 
的 无 序列 表 。 分 隔 符 会 通过 CSS (bootstrap.min.css) 中 下 面 所 示 的 class 自动 被 
添加 : 


.breadcrumb > li + li:before ( 
color: ZCCCCCC; 
content: "/ "; 
padding: © 5px; 


下 面 的 实例 演示 了 面包 屑 导航 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 面包 层 导 航 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«ol class-"breadcrumb"» 
«li»«a href="#">Home</a></1i> 
<li><a hrefz'4'"»22013«/a»«/li» 
<li class="active"> 十 一 月 </1i> 
«/ol» 


«/body» 
«/html» 


bo -= AA 
结果 如 下 所 示 : 


Home / 2013 


Bootstrap 分 页 


本 章 将 讲解 Bootstrap 支持 的 分 页 特性 。 分 页 (Pagination) ， 是 一 种 无 序列 表 ， 
Bootstrap 像 处 理 其 他 界面 元 素 一 样 义理 分 页 。 


分 页 (Pagination) 


下 表 列 出 了 Bootstrap 提供 的 义理 分 页 的 class. 


.pagination 


添加 该 class 来 在 页 面 上 显示 分 页 。 


&lt;ul class-"pagination"&gt; 
&lt;li&gt;&lt;a hrefz"Z"&gt;&laquo;&lt;/a&gt;&1t;/li&gt; 
&lt;li&gt;&lt;a hrefz'"Zz"&gt;1&1lt;/a&gt;&lt;/li&gt; 


&lt;/ul&gt; 


.disabled, .active 


您 可 以 自 定义 链接 ， 通 过 使 用 .disabled 来 定义 不 可 点 击 的 链接 ， 通 过 使 用 .active 
来 指示 当前 的 页 面 。 


&lt;ul class-"pagination"&gt; 
&lt;li class-"disabled"&gt;&lt;a href-'Zz'"&gt;&laquo;&lt;/a&gt;&lt 
&lt;li class-'"active'"&gt;&lt;a href-z'Z'"&gt;1&lt;span class-'sr-or 


&lt;/ul&gt; 
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.pagination-lg, .pagination-sm 


使 用 这 些 class 来 获取 不 同 大 小 的 项 。 


&lt;ul class-"pagination pagination-lg"&gt;...&lt;/ul&gt; 
&lt;ul class-"pagination"&gt;...&lt;/ul&gt; 
&lt;ul class-"pagination pagination-sm"&gt;...&lt;/ul&gt; 


默认 的 分 页 


下 面 的 实例 演示 了 上 表 中 所 讨论 的 class .pagination 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 默认 的 分 页 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<ul class="pagination"> 
<li><a href="#">&laquo;</a></li> 
<li><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">&raquo;</a></li> 

</ul> 


</body> 
</html> 


:| 
结果 如 下 所 示 : 


分 页 的 状态 
下 面 的 实例 演示 了 上 表 中 所 讨论 的 class .disabled、.active 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 分 页 的 状态 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<ul class="pagination"> 
<li><a href="#">&laquo;</a></li> 
<li class="active"><a href="#">1</a></li> 
<li class="disabled"><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">&raquo;</a></li> 
</ul> 


</body> 
</html> 


El E z| 
结果 如 下 所 示 : 


E] 


分 页 的 大 小 
下 面 的 实例 演示 了 上 表 中 所 讨论 的 class .pagination-* 的 用 法 : 





<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 分 页 的 大 小 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src-"/scripts/jquery.min.js"»«/script» 
«script src-z"/bootstrap/js/bootstrap.min.js'"»«/script» 
</head> 
<body> 


«ul class-"pagination pagination-1g"> 
<li><a href="#">&laquo;</a></li> 
<li><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">&raquo;</a></li> 

«/ul»«br» 

«ul class-"pagination"» 
<li><a href="#">&laquo;</a></li> 
<li><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">&raquo;</a></li> 

</ul><br> 

<ul class="pagination pagination-sm"> 

<li><a href="#">&laquo;</a></li> 
<li><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href="#">&raquo;</a></li> 

</ul> 


</body> 
</html> 


二 RE 
结果 如 下 所 示 : 


翻 页 (Pager) 


如 果 您 想 要 创建 一 个 简单 的 分 页 链接 为 用 户 提供 导航 ， 可 通过 翻 页 来 实现 。 和 与 分 页 
链接 一 样 ， 翻 页 也 是 无 序列 表 。 黑 认 情 况 下 ， 链 接 是 居中 显示 。 下 表 列 出 了 
Bootstrap 义理 翻 页 的 class. 


.pager 


添加 该 class 来 获得 翻 页 链接 。 


&lt;ul class="pager"&gt; 
&lt;li&gt;&lt;a hrefz'"Z"&gt;Previous&lt;/a&gt;&lt;/li&gt; 
&lt;li&gt;&lt;a hrefz'"Z"&gt;Next&lt;/a&gt;&lt;/li&gt; 
&lt;/ul&gt; 


.previous, .next 


使 用 class .previous 把 链接 向 左 对 齐 ， 使 用 .next 把 链接 向 右 对 齐 。 


&lt;ul class-z"pager"&gt; 
&lt;li class-"previous"&gt;&lt;a href-'zZz'"&gt;&larr; Older&lt;/a&t 
&lt;li class-z"next'"&gt;&lt;a href="#"&gt;Newer &rarr;&lt;/a&gt;&. 
&lt;/ul&gt; 
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.disabled 


添加 该 class 来 获得 一 个 颜色 变 淡 的 外 观 。 


&lt;ul class-"pager"&gt; 
&lt;li class-"previous disabled"&gt;&lt;a href-z"Zz"&gt;&larr; Olde 
&lt;li class-"next"&gt;&lt;a href-z'Z'&gt;Newer &rarr;&lt;/a&gt;&. 
&lt;/ul&gt; 


m Ă— p 
默认 的 翻 页 
下 面 的 实例 演示 了 上 表 中 所 讨论 的 class .pager 的 用 法 : 








<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 默认 的 翻 页 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js'"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<ul class="pager"> 
<li><a href="#">Previous</a></li> 
<li><a href="#">Next</a></li> 
</ul> 


</body> 
</html> 


db =- AA 
结果 如 下 所 示 : 


Previous Next 


对 齐 的 链接 
下 面 的 实例 演示 了 上 表 中 所 讨论 的 class .previous、.next 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 翻 页 中 对 齐 的 链接 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<ul class="pager"> 
<li class="previous"><a href="#">&larr; Older</a></1i> 
«li class="next"><a href="#">Newer &rarr;«/a»«/li» 
</ul> 


</body> 
</html> 


Rb =- A 
结果 如 下 所 示 : 


ider Newer 


翻 页 的 状态 
下 面 的 实例 演示 了 上 表 中 所 讨论 的 class .disabled 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 翻 页 的 状态 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<ul class="pager"> 
«li class="previous disabled"><a href="#">&larr; Older</a></1i> 
«li class="next"><a href="#">Newer &rarr;«/a»«/li» 

</ul> 


</body> 
</html> 
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结果 如 下 所 示 : 


— Older Newer — 
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Bootstrap 标签 


本 章 将 讲解 Bootstrap 标签 。 标 签 可 用 于 计数 、 提 示 或 页 面 上 其 他 的 标记 显示 。 使 


用 class .label 来 显示 标签 ， 


<!DOCTYPE html» 
«html» 
«head» 


如 下 面 的 实例 所 示 : 


«title»Bootstrap 实例 - 标签 </title> 

«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script src-z"/scripts/jquery.min.js"»«/script» 

«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 


«/head» 
«body» 


«hi»5Example Heading 
«h2»Example Heading 
«h3»-Example Heading 
«h4»Example Heading 


«/body» 
«/html» 


本 — 


结果 如 下 所 示 : 


<span 
<span 
<span 
<span 


class-"label label-default">Label</span>: 
class-"label label-default">Label</span>: 
class-"label label-default">Label</span>: 
class-"label label-default">Label</span>: 





Example Heading E' 


Example Heading | 


Example Heading 
Example Heading 


您 可 以 使 用 修饰 的 class label-default, label-primary, label-success. label- 
info, label-warning, label-danger 来 改变 标签 的 外 观 ， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 标签 的 变 体 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


«span class="label label-default"> 默 认 标 签 </span> 
«span class-"label label-primary"> 主 要 标签 </span> 
«span class-"label label-success"> 成 功 标 签 </span> 
«span class="label label-info"> 信 息 标签 </span> 

«span class-"label label-warning"»€ Zi &«/span» 
«span class-"label label-danger"> 危 险 标 签 </span> 


</body> 
«/html» 


oL 
结果 如 下 所 示 : 


Bootstrap 徽章 (Badges) 


本 章 将 讲解 Bootstrap 徽章 (Badges) 。 徽 章 与 标签 相似 ， 主 要 的 区 别 在 于 徽章 的 
边 角 更 加 圆滑 。 


徽章 (Badges) RE Aui 如 需 使 用 徽章 ， 只 需要 把 
<span class="badge"> 添加 到 链接 、Bootstrap 导航 等 这 些 元 素 上 即 可 。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 徽章 (Badges) </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script src-"/bootstrap/js/bootstrap.min.js'"»«/script» 
</head> 
<body> 


<a href="#">Mailbox <span class="badge">50</span></a> 


</body> 
</html> 


e =-= LA 
结果 如 下 所 示 : 

Mailbo» 

当 没 有 新 的 或 未 读 的 项 时 ， 通 过 CSS 的 :empty 选择 器 ， 徽 章 会 折 和 县 起 来 ， 表 示 
里 边 没 有 内 容 。 

激活 导航 状态 


您 可 以 在 激活 状态 的 胶囊 式 导 航 和 列表 导航 中 放置 徽章 。 通 过 使 用 <span 
class="badge"> 来 激活 链接 ， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 激活 导航 状态 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script src-z"/bootstrap/js/bootstrap.min.js'"»«/script» 
</head> 
<body> 


«h4» gi SEX Şin PITAO TA A / h4» 
«ul class="nav nav-pills"- 
«li class-"active"»«a href="#"> 首 页 «span class-"badge"»42«/span 
<li><a href="#"> 简 介 </a></1i> 
<li><a href="#"> 消 息 «span class="badge">3</span></a></1i> 
«/ul» 
«br» 
<h4> 列 表 导 航 中 的 激活 状态 </h4> 
«ul class-"nav nav-pills nav-stacked" style="max-width: 260px;"> 
«li class="active"> 
«a href="#"> 
«span class-"badge pull-right"»242«/span» 
首页 
</a> 
</li> 
<li><a href="#"> 简 介 </a></1i> 
«li» 
«a href="#"> 
«span class-"badge pull-right"»3«/span» 


消息 
</a> 
</li> 
</ul> 
</body> 
</html> 





结果 如 下 所 示 : 
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EXE eu BUEGEUUS 
ET. 
列表 导航 中 的 激活 状态 

简介 

消息 e 
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Bootstrap 超大 屏幕 (Jumbotron) 


本 章 将 讲解 Bootstrap 支持 的 另 一 个 特性 ， 超 大 屏幕 (Jumbotron) 。 Bi LE 
组 件 可 以 增加 标题 的 大 小 ， 并 为 登陆 页 面 内 容 添 加 更 多 的 外 边 距 (margin) 。 使 用 
超大 屏幕 (Jumbotron) 的 步 又 如 下 : 


e 创建 一 个 带 有 class .jumbotron. 的 容器 <div>. 
e 除了 更 大 的 <h1>， 字 体 粗细 font-weight 被 减 为 200px。 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 超大 屏幕 (Jumbotron) </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«div class-"container"- 
«div class-"jumbotron"- 
<h1> 欢 迎 登 陆 页 面 ! </h1> 
<p> 这 是 一 个 超大 屏幕 (Jumbotron) 的 实例 。</p> 
<p><a class="btn btn-primary btn-lg" role="button"> 
学 习 更 多 </a> 
«/p» 
«/div» 
«/div» 


«/body» 
«/html» 
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结果 如 下 所 示 : 


欢迎 登陆 负面! 


这 是 一 个 超大 屏幕 (Jumbotron) 的 实例 .- 


为 了 获得 占用 全 部 宽度 且 不 带 圆 角 的 超大 屏幕 ， 请 在 所 有 的 .container class 外 使 
用 .jumbotron class， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 超大 屏幕 (Jumbotron) </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'"» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«div class="jumbotron"> 
«div class-"container"- 
<h1> 欢 迎 登 陆 页 面 ! </h1> 
<p> 这 是 一 个 超大 屏幕 (Jumbotron) 的 实例 。</p> 
<p><a class="btn btn-primary btn-lg" role="button"> 
学 习 更 多 </a> 
</p> 
</div> 
</div> 


</body> 
</html> 


LEN -=A 
结果 如 下 所 示 : 


W3School Bootstrap 教程 


欢迎 登陆 页 面 ! 
这 是 一 个 超大 屏幕 (Jumbotron) 的 实例 .。 
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Bootstrap 页 面 标题 (Page Header) 


页 面 标题 (Page Header) 是 个 不 错 的 功能 ， 它 会 在 网 页 标题 四 周 添加 适当 的 间 
距 。 当 一 个 网 页 中 有 多 个 标题 且 每 个 标题 之 间 需 要 添加 一 定 的 间距 时 ， 页 面 标题 这 
个 功能 就 显得 特别 有 用 。 如 需 使 用 页 面 标 题 (Page Header) ， 请 把 您 的 标题 放置 
在 带 有 class .page-header 的 <div> 中 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 页 面 标题 </tit1le> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«div class-"page-header'» 
<h1> 页 面 标题 实例 
<small> 子 标题 </small> 
«/hi» 
«/div» 
<p> 这 是 一 个 示例 文本 。 这 是 一 个 示例 文本 。 这 是 一 个 示例 文本 。 这 是 一 个 示例 文本 。 这 是 


«/body» 
«/html» 


局 | 
结果 如 下 所 示 : 





页 面 标题 实例 


这 是 一 个 示例 文本 。 这 是 一 个 示例 文本 。 这 是 一 个 示例 文本 。 这 是 一 个 示例 文本 。 这 是 一 个 示例 文本 。 


Bootstrap 缩 略 


本 章 将 讲解 Bootstrap 缩 略 图 。 大 多 数 站 点 都 需要 在 网 格 中 布局 图 像 、 视 频 、 文 本 
等 。 Bootstrap 通过 缩 略 图 为 此 提供 了 一 种 简便 的 方式 。 使 用 Bootstrap 创建 缩 略图 
的 步骤 如 下 : 

e 在 图 像 周 围 添加 带 有 class .thumbnail 的 «a» 标签 。 

e 这 会 添加 四 个 像素 的 内 边 距 (padding) 和 一 个 灰色 的 边框 。 

e 当 饥 标 荐 停 在 图 像 上 时 ， 会 动画 显示 出 图 像 的 轮廓 。 


下 面 的 实例 演示 了 默认 的 缩 略 图 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 缩 略 图 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="row"> 
<div class="col-sm-6 col-md-3"> 
<a href="#" class="thumbnail"> 
<img src="img/kittens.jpg" 
alt=" 通 用 的 占 位 符 缩 略 图 "> 
</a> 
</div> 
«div class="col-sm-6 col-md-3"> 
«a href="#" class="thumbnail"> 
«img src="img/kittens.jpg" 
alt=" 通 用 的 占 位 符 缩 略 图 "> 
</a> 
</div> 
«div class="col-sm-6 col-md-3"> 
«a href="#" class="thumbnail"> 
<img src="img/kittens.jpg" 
alt=" 通 用 的 占 位 符 缩 略 图 "> 
</a> 
</div> 
«div class="col-sm-6 col-md-3"> 
«a href="#" class="thumbnail"> 
«img src="img/kittens.jpg" 
alt=" 通 用 的 占 位 符 缩 略图 "> 
«/a» 
«/div» 
«/div» 


«/body» 
«/html» 


EJ xm Ea 
结果 如 下 所 示 : 








添加 E 定义 的 内 容 


现在 我 们 有 了 一 个 基本 的 缩 略图 ， 我 们 可 以 向 缩 略 图 添加 各 种 HTML 内 容 ， 比 如 标 
题 、 段 落 或 按钮 。 具 体 步骤 如 下 : 


e。 把 带 有 class .thumbnail 的 «a» 标签 改 为 <div>。 

@ 在 该 <div> 内 ， 您 可 以 添加 任何 您 想 要 要 添加 的 东西 。 由 于 这 是 
们 可 以 使 用 默认 的 基于 span 的 命名 规则 来 调整 大 小 。 

e 如 果 您 想 要 给 多 个 图 像 进行 分 组 ， 请 把 它们 放置 在 一 个 无 序列 表 中 ， 且 每 个 列 
表 项 向 左 浮动 。 


下 面 的 实例 演示 了 这 点 : 


一 个 <div>， 我 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 自 定义 缩 略图 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="row"> 
«div class="col-sm-6 col-md-3"> 
«div class-"thumbnail"» 
«img src-"img/kittens.jpg" 
alt=" 通 用 的 占 位 符 缩 略图 "> 
</div> 
<div class="caption"> 
<h3> 缩 略图 标签 </h3> 
<p> 一 些 示例 文本 。 一 些 示 例文 本 。</p> 
«p» 
«a href="#" class="btn btn-primary" role="button"> 
按钮 
</a> 
«a href="#" class="btn btn-default" role="button"> 
按钮 
</a> 
</p> 
</div> 
</div> 
<div class="col-sm-6 col-md-3"> 
<div class="thumbnail"> 
<img src="img/kittens.jpg" 
alt=" 通 用 的 占 位 符 缩 略 图 "> 
</div> 
<div class="caption"> 
<h3> 缩 略图 标签 </h3> 
<p> 一 些 示例 文本 。 一 些 示 例文 本 。</p> 


«p» 


E 


结 


吉 果 如 下 所 示 : 


<a href="#" class="btn btn-primary" 
按钮 
</a> 
«a href="#" class="btn btn-default" 
按钮 
</a> 
</p> 
</div> 
</div> 
«div class="col-sm-6 col-md-3"> 
«div class="thumbnail"> 
«img src-"img/kittens.jpg" 
alt=" 通 用 的 占 位 符 缩 略 图 "> 
«/div» 
«div class-"caption"» 
<h3> 缩 略图 标签 </h3> 
<p> 一 些 示例 文本 。 一 些 示 例文 本 。</p> 
«p» 
«a href="#" class="btn btn-primary" 
按钮 
</a> 
<a href="#" class="btn btn-default" 
按钮 
</a> 
</p> 
</div> 
</div> 
<div class="col-sm-6 col-md-3"> 
«div class="thumbnail"> 
«img src="img/kittens.jpg" 
alt=" 通 用 的 占 位 符 缩 略图 "> 
</div> 
<div class="caption"> 
<h3> 缩 略图 标签 </h3> 
<p> 一 些 示例 文本 。 一 些 示 例文 本 。</p> 


<p> 
«a href="#" class="btn btn-primary" 
按钮 
</a> 
«a href="#" class="btn btn-default" 
按钮 
</a> 
</p> 
</div> 
</div> 
</div> 
</body> 
«/html» 


role-"button"» 


role-"button"» 


role-"button"» 


role-"button"» 


role-"button"» 


role-"button"» 
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缩 略 图 标签 缩 略 图 标签 
一 些 示 例文 本 。 一 些 示 例文 本 。 一 此 示例 文本 。 一 些 示例 文本 . 
LM su DM su 
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缩 略 图 标签 


一 些 示例 文本 。 一 些 示 例文 本 。 


COEM 按钮 


缩 略 图 标签 


一 些 示 例文 本 。 一 些 示例 文本 。 


按钮 按钮 


Bootstrap 警告 (Alerts ) 


本 章 将 讲解 警告 (Alerts) 以 及 Bootstrap 所 提供 的 用 于 警告 的 class。 和 警告 


a C 种 定义 消息 样式 的 方式 。 它 们 为 典型 的 用 户 操作 提供 了 
上 下 文 信息 PI 


WDR UR 为 了 创建 一 个 内 联 的 可 取消 的 警告 框 ， 
请 使 用 警告 (Alerts) jQuery 插件 。 


您 可 以 通过 创建 一 个 <div>， 并 向 其 添加 一 个 .alert class 和 四 个 上 下 文 class (BD 
.alert-success, .alert-info, Er g .alert-danger) 之 一 ， 来 添加 一 个 
基本 的 警告 框 。 下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - € (Alerts) </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'- 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 


<body> 

«div class-"alert alert-success"> 成 功 ! 很 好 地 完成 了 提交 。</div> 
«div class-"alert alert-info"> 信 息 ! 请 注意 这 个 信息 。</div> 
«div class="alert alert-warning"> 和 警告 ! ; 不 要 提交 </div> 

«div class-"alert alert-danger"> 错 误 ! 请 进行 一 些 更 改 。 </div> 
</body> 

«/html» 
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结果 如 下 所 示 : 


成 功 ! 很 好 地 完成 了 提交 。 


错误 ! 请 进行 一 些 更 改 。 


可 取消 的 警告 (Dismissal Alerts) 


创建 一 个 可 取消 的 警告 (Dismissal Alert) 步骤 如 下 : 


e 通过 创建 一 个 <div>， 并 向 其 添加 一 个 .alert class 和 四 个 上 下 文 class (BD 
.alert-success, .alert-info, .alert-warning. .alert-danger) 之 一 ， 来 添加 
一 个 基本 的 警告 框 。 


向 上 面 的 <div> class 添加 可 选 的 .alert-dismissable。 
e XJ 一 个 关闭 按钮 。 


下 面 的 实例 演示 了 这 点 


<!DOCTYPE html» 

«html» 

«head» 
«title»Bootstrap 实例 - 可 取消 的 警告 (Dismissal Alerts) </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 

</head> 

<body> 


<div class="alert alert-success alert-dismissable"> 
<button type="button" class="close" data-dismiss="alert" 
aria-hidden="true"> 


&times; 
</button> 
成 功 ! 很 好 地 完成 了 提交 。 
</div> 


<div class="alert alert-info alert-dismissable"> 
«button type="button" class="close" data-dismiss-"alert" 
aria-hidden="true"> 


&times; 
«/button» 
信息 ! 请 注意 这 个 信息 。 
«/div» 


«div class-"alert alert-warning alert-dismissable"-» 
«button type="button" class-'close" data-dismiss-"alert" 
aria-hidden-"true"» 


&times; 
«/button» 
警告 ! 请 不 要 提交 。 
«/div» 


«div class-"alert alert-danger alert-dismissable"» 
«button type="button" class-'close" data-dismiss-"alert" 
aria-hidden-"true"» 
&times; 
«/button» 
Six b 请 进行 一 些 更 改 。 
«/div» 


«/body» 
«/html» 


jag 了 "| 
请 确保 使 用 带 有 data-dismiss-"alert" data 属性 的 «button» 元 素 。 
结果 如 下 所 示 : 


成 功 ! 很 好 地 完成 了 提交 


错误 ! 请 进行 一 些 更 改 。 


警告 (Alerts) 中 的 链接 


在 警告 (Alerts) 中 创建 链接 的 步骤 如 下 : 


e 通过 创建 一 个 <div>， 并 向 其 添加 一 个 .alert class 和 四 个 上 下 文 class ( 即 
.alert-success, .alert-info, .alert-warning. .alert-danger) 之 一 ， 来 添加 
一 个 基本 的 警告 框 。 

。 使 用 .alert-link 实体 类 来 快速 提供 带 有 匹配 颜色 的 链接 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 警告 (Alerts) 中 的 链接 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


«div class-"alert alert-success"> 

«a href="#" class-"alert-link"»5k7J ! 很 好 地 完成 了 提交 。</a> 
</div> 
<div class="alert alert-info"> 

«a href="#'" class="alert-link"> 信 息 ! 请 注意 这 个 信息 。</a> 
</div> 
<div class="alert alert-warning"> 

«a href="#" class-"alert-link'"2€Z 
«/div» 
«div class-"alert alert-danger'"» 

«a href="#" class-"alert-link'"»4;x 1 请 进行 一 些 更 改 。</a> 
«/div» 


请 不 要 提交 。</a> 


</body> 
«/html» 


Rb -= AA 
结果 如 下 所 示 : 


信息 ! 请 注意 这 个 信息 。 


警告 ! 请 不 要 提交 。 


iix! 请 进行 一 些 更 改 。 


Bootstrap 进度 条 


本 章 将 讲解 Bootstrap 进度 条 。 在 本 教程 中 ， 您 将 看 到 如 何 使 用 Bootstrap 创建 加 
载 、 重 定向 或 动作 状态 的 进度 条 。 


Bootstrap 进度 条 使 用 CSS3 过 渡 和 动画 来 获得 该 效果 。lnternet Explorer 9 
及 之 前 的 版 本 和 旧版 的 Firefox 不 支持 该 特性 ，Opera 12 不 支持 动画 。 


默认 的 进度 条 


创建 一 个 基本 的 进度 条 的 步骤 如 下 : 


e 添加 一 个 带 有 class .progress 的 pues 

e 接着 ， 在 上 面 的 <div> 内 ， 添 加 一 个 带 有 class .progress-bar 的 空 的 <div>。 

e. 添加 一 个 带 有 百分比 表示 的 宽度 的 属性 ， 例 如 style="60%"; 表示 进度 条 
在 60% 的 位 置 。 


让 我 们 看 看 下 面 的 实例 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 进度 条 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'- 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="progress"> 
<div class="progress-bar" role="progressbar" aria-valuenow="60" 
aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> 
«span class="sr-only">40% 完成 </span> 
</div> 
</div> 


</body> 
</html> 
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结果 如 下 所 示 : 


创建 不 同样 式 的 进度 条 的 步骤 如 下 : 


e 添加 一 个 带 有 class .progress 的 «div», 

e 接着 ， 在 上 面 的 <div> 内 ， 添 加 一 个 带 有 class .progress-bar 和 class 
progress-bar-* 的 空 的 <div>。 其 中 ， PALÆ "success. info. warning. 
danger. 

e. 添加 一 个 带 有 百分比 表示 的 宽度 的 style 属性 ， 例 如 style="60%"; 表示 进度 条 
在 60% 的 位 置 。 


让 我 们 看 看 下 面 的 实例 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 交替 的 进度 条 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="progress"> 

<div class-"progress-bar progress-bar-success" role="progressbal 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 90%; "> 
«span class="sr-only">90% 完成 (成 功 ) </span> 

«/div» 

«/div» 
«div class-"progress'"» 

«div class-"progress-bar progress-bar-info" role-'"progressbar" 
aria-valuenow-"60" aria-valuemin-z"O" aria-valuemax-"100" 
style="width: 30%;"> 
«span class-"sr-only"»3096 完成 (信息 ) </span> 

«/div» 

«/div» 
«div class-"progress'"» 

«div class-"progress-bar progress-bar-warning" role-"progressbai! 
aria-valuenow-z"60" aria-valuemin="0" aria-valuemax-"100" 
style="width: 20%;"> 
«span class-"sr-only"»2096 完成 (警告 ) «/span» 

«/div» 

«/div» 
«div class-"progress'"» 

«div class-"progress-bar progress-bar-danger" role-"progressbar' 
aria-valuenow-"60" aria-valuemin="0" aria-valuemax-"100" 
style-"width: 10%;"> 
«span class-"sr-only"»1096 完成 (危险 ) </span> 

«/div» 

«/div» 


«/body» 
«/html» 


" 一 一 一 一 
结果 如 下 所 示 : 





条 纹 的 进度 条 
创建 一 个 条 纹 的 进度 条 的 步骤 如 下 : 


e 添加 一 个 带 有 class .progress 和 .progress-striped 的 «div», 

e 接着 ， 在 上 面 的 <div> 内 ， 添 加 一 个 带 有 class .progress-bar 和 class 
progress-bar-* 的 空 的 <div>。 其 中 ， 可 以 是 *success、info、warning、 
danger. 

e. 添加 一 个 带 有 百分比 表示 的 宽度 的 style 属性 ， 例 如 style="60%"; 表示 进度 条 
在 60% 的 位 置 。 


让 我 们 看 看 下 面 的 实例 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 条 纹 的 进度 条 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="progress progress-striped"> 
<div class-"progress-bar progress-bar-success" role="progressbal 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 90%; "> 
«span class="sr-only">90% 完成 (成功) </span> 
</div> 
</div> 
<div class="progress progress-striped"> 
<div class="progress-bar progress-bar-info" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax-"100" 
style="width: 30%;"> 
«span class="sr-only">30% 完成 (信息 ) </span> 
</div> 
</div> 
<div class="progress progress-striped"> 
<div class="progress-bar progress-bar-warning" role="progressbal 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 20%;"> 
«span class="sr-only">20% 完成 (警告 ) </span> 
</div> 
</div> 
<div class="progress progress-striped"> 
<div class="progress-bar progress-bar-danger" role="progressbar' 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 10%;"> 
«span class="sr-only">10% 完成 (危险 ) </span> 
</div> 
</div> 


</body> 
</html> 
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结果 如 下 所 示 : 


动画 的 进度 条 
创建 一 个 动画 的 进度 条 的 步骤 如 下 : 


e 添加 一 个 带 有 class .progress 和 .progress-striped 的 <div>。 同 时 添加 
class live, 

e 接着 ， 在 上 面 的 <div> 内 ， 添 加 一 个 带 有 class .progress-bar 的 空 的 <div>。 

e. 添加 一 个 带 有 百分比 表示 的 宽度 的 style 属性 ， 例 如 style="60%"; 表示 进度 条 
在 60% 的 位 置 。 


这 将 会 使 条 纹 具 有 从 右 向 左 的 运动 感 。 
让 我 们 看 看 下 面 的 实例 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 动画 的 进度 条 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="progress progress-striped active"> 
<div class="progress-bar progress-bar-success" role="progressbal 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 40%; "> 
«span class="sr-only">40% 完成 </span> 
</div> 
</div> 


</body> 
</html> 





结果 如 下 所 示 : 
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<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - ME&BgjsJE«/title» 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="progress"> 
<div class="progress-bar progress-bar-success" role-"progressbai 
aria-valuenow="60" aria-valuemin="0" aria-valuemax-"100" 
style="width: 40%; "> 
«span class="sr-only">40% 完成 </span> 
</div> 
<div class="progress-bar progress-bar-info" role="progressbar" 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 30%;"> 
«span class="sr-only">30% 完成 (信息 ) </span> 
</div> 
<div class-"progress-bar progress-bar-warning" role="progressbal 
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
style="width: 20%;"> 
«span class="sr-only">20% 完成 (警告 ) </span> 
</div> 
</div> 


</body> 
</html> 
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结果 如 下 所 示 : 





Bootstrap 多 媒体 对 象 (Media Object) 


本 章 我 们 将 讲解 Bootstrap 中 的 多 媒体 对 象 (Media Object) 。 这 些 抽 象 的 对 象 祥 
式 用 于 创建 各 种 类 型 的 组 件 (比如 : 博客 评论 ) ， 我 们 可 以 在 组 件 中 使 用 图 文 混 
排 ， S E E 媒体 对 象 可 以 用 更 少 的 代码 来 实现 媒体 对 象 与 文 
字 的 混 排 。 


媒体 对 象 轻 量 标记 、 易 于 扩展 的 特性 是 通过 向 简单 的 标记 应 用 class 来 实现 的 。 你 
可 以 在 HTML 标签 中 添加 以 下 两 种 形式 来 设置 媒体 对 象 : 


e media : 该 class 人 允许 将 媒体 对 象 里 的 多 媒体 〈 图 像 、 视 频 、 音 频 ) 浮动 到 内 
容 区 块 的 左边 或 者 右边 。 

e .media-list : 如 果 你 需要 一 个 列表 ， 各 项 内 容 是 无 序列 表 的 一 部 分 ， 可 以 使 用 
该 class。 可 用 于 评论 列表 和 与 文章 列表 。 


让 我 们 来 看 看 下 面 这 个 有 关 默 认 的 媒体 对 象 media 的 实例 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 默认 的 媒体 对 象 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<div class="media"> 

«a class-"pull-left" href="#"> 
«img class-"media-object" src-"img/64.jpg" 
alt=" 媒 体 对 象 "> 

</a> 

<div class="media-body"> 
<h4 class="media-heading"> 媒 体 标 题 </h4> 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 


这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
«/div» 
«/div» 


«div class-"media'» 

«a classz"pull-left" href="#"> 
«img class-"media-object" srcz"img/64.jpg" 
alt=" 媒 体 对 象 "> 

</a> 

<div class="media-body"> 
<h4 class="media-heading"> 媒 体 标题 </h4> 
这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 


这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 


这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 


这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 
这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 


«div class="media"> 
«a classz"pull-left" href="#"> 
«img class-"media-object" srcz"img/64.jpg" 
alt=" 媒 体 对 象 "> 
</a> 
<div class="media-body"> 
«h4 class="media-heading"> 媒 体 标题 </h4> 
这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
«/div» 
«/div» 
«/div» 
«/div» 


«/body» 
«/html» 


图 





结果 如 下 所 示 : 


媒体 标题 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 


些 示 例文 本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 例 
文本 。 这 是 一 些 示例 文本 。 


媒体 标题 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 


些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 
文本 。 这 是 一 些 示例 文本 。 





媒体 标题 

这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 广 
本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 
例文 本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 
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让 我 们 来 看 看 下 面 这 个 有 关 媒 体 对 象 列 表 .media-list 的 实例 : 


<!DOCTYPE html» 

«html» 

«head» 
«title»Bootstrap 实例 - 媒体 对 象 列表 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 


«script srcz"/bootstrap/js/bootstrap.min.js'»«/script» 
«/head» 
«body» 


«ul class-"media-list'"» 
«li class-"media"» 
«a class-"pull-left" href="#"> 
«img class-"media-object" srcz"img/64.jpg" 
alt=" 通 用 的 占 位 符 图 像 "> 
</a> 
<div class="media-body"> 
<h4 class="media-heading"> 媒 体 标题 </h4> 
<p> 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。</p> 
<! - - 揪 套 的 媒体 对 象 --> 
«div class-"media"» 
«a classz"pull-left" href="#"> 
«img class-"media-object" src-z"img/64.jpg" 
alt=" 通 用 的 占 位 符 图 像 "> 
</a> 
<div class="media-body"> 
<h4 class="media-heading"> 巾 套 的 媒体 标题 </h4> 
这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
«1-- 岩 套 的 媒体 对 象 --> 
<div class="media"> 
«a class="pull-left" href="#"> 
«img class="media-object" srcz"img/64.jpg" 
alt=" 通 用 的 占 位 符 图 像 "> 
</a> 
<div class="media-body"> 
<h4 class="media-heading"> 巾 套 的 媒体 标题 </h4> 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 


这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
«/div» 
«/div» 
«/div» 


</div> 
<!-- 斤 套 的 媒体 对 象 - -> 
«div class-"media"» 
«a classz"pull-left" href="#"> 
«img class-"media-object" src-'"img/64.jpg" 
alt=" 通 用 的 占 位 符 图 像 "> 
</a> 


«div class-"media-body"» 
«h4 class-"media-heading" >W EB gi /h4» 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 


这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
«/div» 
«/div» 
«/div» 


</li> 
<li class="media"> 
<a class="pull-right" href="#"> 
<img class="media-object" src="img/64.jpg" 
alt=" 通 用 的 占 位 符 图 像 "> 
</a> 
<div class="media-body"> 
<h4 class="media-heading"> 媒 体 标题 </h4> 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 


这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
«/div» 
</li> 
</ul> 
</body> 
</html> 


| 


结果 如 下 所 示 : 
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媒体 标题 


这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 


EXER Pen 
这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 


示例 文本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 例文 
本 。 这 是 一 些 示 例文 本 。 


谱 套 的 媒体 标题 

这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 
本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 
文本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示 例文 本 。 


谱 套 的 媒体 标题 


示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 例文 
本 。 这 是 一 些 示例 文本 。 














媒体 标题 


这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 这 是 一 些 示例 文本 。 这 是 一 些 示例 文本 。 这 是 一 些 示 例文 本 。 
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Bootstrap 列表 组 


本 章 我 们 将 讲解 列表 组 。 列 表 组 件 用 于 以 列表 形式 呈现 复杂 的 和 自 定 义 的 内 容 。 创 
建 一 个 基本 的 列表 组 的 步骤 如 下 : 


e 向 元 素 «ul» 添加 class .list-group。 
e 向 «li» 添加 class .list-group-item, 


下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 基本 的 列表 组 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 
<ul class="]ist-group"> 
«li class='"1ist-group-item"> 免 费 域名 注册 </1i> 
«li class="1ist-group-item"> 免 费 Window 空间 托管 </1i> 
«li class="1list-group-item"> 图 像 的 数量 </1i> 
«li class="list-group-item">24*7 支持 </1i> 
«li class="1list-group-item"> 每 年 更 新 成 本 </1i> 
«/ul» 


«/body» 
«/html» 


二 = -LA 
结果 如 下 所 示 : 

免费 域名 注册 

免费 Window 空间 托管 

图 像 的 数量 

24*7 支持 


每 年 更 新 成 本 


向 列表 组 添加 徽章 


我 们 可 以 向 任意 的 列表 项 添加 徽章 组 件 ， 它 会 自动 定位 到 右边 。 只 需要 在 <li> 元 素 
中 添加 <span class="badge"> 即 可 。 下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 向 列表 组 添加 徽章 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«ul class-'"list-group'» 

«li class="list-group-item"> 免 费 域名 注册 </1i> 
«li class="list-group-item"> 免 费 Window 空间 托管 </1i> 
«li class="1list-group-item"> 图 像 的 数量 </1i> 
«li class-"list-group-item"- 

«span class="badge"> 新 </span> 

24*7 支持 
</li> 
«li class="1list-group-item"> 每 年 更 新 成 本 </1i> 
«li class-"list-group-item"- 

«span class="badge"> 新 </span> 


折扣 优惠 
</li> 
</ul> 
</body> 
</html> 


LENS = A 
结果 如 下 所 示 : 

免费 域名 注册 

免费 Window 空间 托管 

图 像 的 数量 

24*7 支持 

每 年 更 新 成 本 

折扣 优惠 


向 列表 组 添加 链接 


I Vie Teu EPA nntetran XE F2 
W3School Bootsti ap 2X ÎE 


e r uiua 我 们 需要 使 用 «div» fX 
$$ «ul» 元 素 。 下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 向 列表 组 添加 链接 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 


<body> 

«a href="#" class-"list-group-item active"> 
免费 域名 注册 

</a> 


«a href="#" class="list-group-item">24*7 支持 </a> 

«a href="#" class="1list-group-item"> 免 费 window 空间 托管 </a> 
«a href="#" class="lLlist-group-item"> 图 像 的 数量 </a> 

«a href="#" class="1list-group-item"> 每 年 更 新 成 本 </a> 


</body> 
</html> 


| 
结果 如 下 所 示 : 





24*7 支持 


免费 Window 空间 托管 
图 像 的 数量 
每 年 更 新 成 本 


癌 列 表 组 添加 目 定义 内 容 


我 们 可 以 向 上 面 已 添加 链接 的 列表 组 添加 任意 的 HTML. 内 容 。 下 面 的 实例 演示 了 


a 
EAT 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 向 列表 组 添加 自 定义 内 容 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 


«script srcz"/scripts/jquery.min.js"»«/script» 

«script src-z"/bootstrap/js/bootstrap.min.js'"»«/script» 
«/head» 
«body» 


«div class-"list-group'"» 
«a href="#" class-'"list-group-item active'- 
«h4 class-'"list-group-item-heading"» 
入 门 网 站 包 
«/h4» 
</a> 
«a href="#" class="list-group-item"> 
<h4 class="list-group-item-heading"> 
免费 域名 注册 
«/h4» 
«p class-"list-group-item-text"» 
您 将 通过 网 页 进行 免费 域名 注册 。 
</p> 
</a> 
«a href="#" class="list-group-item"> 
<h4 class="list-group-item-heading"> 
24*7 支持 
</h4> 
«p class="list-group-item-text"> 
我 们 提供 24*7 支持 。 
</p> 
</a> 
</div> 
<div class="list-group"> 
<a href="#" class="list-group-item active"> 
<h4 class="list-group-item-heading"> 
商务 网 站 包 
«/h4» 
</a> 
«a href="#" class="list-group-item"> 
<h4 class="list-group-item-heading"> 
免费 域名 注册 
«/h4» 
«p class-"list-group-item-text"» 
您 将 通过 网 页 进行 免费 域名 注册 。 
</p> 
</a> 
«a href="#" class="list-group-item"> 
<h4 class="list-group-item-heading">24*7 支持 </h4> 
«p class="1ist-group-item-text"> 我 们 提供 24*7 支持 。</p> 
</a> 
</div> 


</body> 
«/html» 
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结果 如 下 所 示 : 
入 门 网 站 包 


免费 域名 注册 

您 将 通过 网 页 进行 免费 域名 注册 。 
24*7 支持 
， 我们 提供 247 支持 。 











免费 域名 注册 
您 将 通过 网 页 进行 免费 域名 注册 。 


| 24*7 支持 
我们 提供 247 支持 。 
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Bootstrap 面板 (Panels) 


本 章 将 讲解 Bootstrap 面板 (Panels) 。 面 板 组 件 用 于 把 DOM 组 件 插入 到 一 个 盒 
子 中 。 创 建 一 个 基本 的 面板 ， 只 需要 向 «div» 元 素 添加 class .panel 和 class 
.panel-default 即 可 ， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 默认 的 面板 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 
«div class="panel panel-default'» 
«div class-"panel-body"» 
这 是 一 个 基本 的 面板 
«/div» 
«/div» 


«/body» 
«/html» 


Sp Bii 
结果 如 下 所 示 : 


面板 标题 


我 们 可 以 通过 以 下 两 种 方式 来 添加 面板 标题 : 


e 使 用 .panel-heading class 可 以 很 简单 地 向 面板 添加 标题 容器 。to easily add 
a heading container to your panel. 
e 使 用 带 有 .panel-title class 的 «h1»-«h6» 来 添加 预定 义 样式 的 标题 。 


下 面 的 实例 演示 了 这 两 种 方式 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 面板 标题 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js'"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="panel panel-default"> 
<div class="panel-heading"> 
不 带 title 的 面板 标题 
«/div» 
«div class-"panel-body"» 
面板 内 容 
«/div» 
«/div» 


«div class="panel panel-default'» 
«div class-z"panel-heading"» 
«h3 class-"panel-title"» 
* title 的 面板 标题 
</h3> 
</div> 
<div class="panel-body"> 
面板 内 容 
</div> 
</div> 


</body> 
«/html» 


C00 EI 
结果 如 下 所 示 : 
不 带 title 的 面板 标题 


面板 内 容 


75 title 的 面板 标题 


面板 内 容 


面板 脚注 


我 们 可 以 在 面板 中 添加 脚注 ， 只 需要 把 按钮 或 者 副 文本 放 在 带 有 class .panel- 
footer 的 <div> 中 即 可 。 下 面 的 实例 演示 了 这 点 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 面板 脚注 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«div class="panel panel-default'» 
«div class-"panel-body"» 
这 是 一 个 基本 的 面板 
</div> 
<div class="panel-footer"> 面 板 脚 注 </div> 
</div> 


</body> 
«/html» 


dp vv Be 
结果 如 下 所 示 : 


这 是 一 个 基本 的 面板 
面板 脚注 


面 版 脚注 不 会 从 带 语 境 色彩 的 面板 中 继承 颜色 和 边框 ， 因 为 它 不 是 前 景 中 的 
内 容 。 


带 语 境 色彩 的 面板 


使 用 语 境 状 态 类 panel-primary、panel-success、panel-info、panel-warning、 
panel-danger， 来 设置 带 语 境 色 彩 的 面板 ， 实 例如 下 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 带 语 境 色 彩 的 面板 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js'"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«div class="panel panel-primary"-» 
«div class-"panel-heading'"» 
«h3 class="panel-title"> 面 板 标 题 </h3> 
</div> 
<div class="panel-body"> 
这 是 一 个 基本 的 面板 
</div> 
</div> 
«div class="panel panel-success"> 
<div class="panel-heading"> 
<h3 class="panel-title"> 面 板 标 题 </h3> 
</div> 
<div class="panel-body"> 
这 是 一 个 基本 的 面板 
</div> 
</div> 
«div class="panel panel-info"> 
«div class="panel-heading"> 
<h3 class="panel-title"> 面 板 标 题 </h3> 
</div> 
<div class="panel-body"> 
这 是 一 个 基本 的 面板 
</div> 
</div> 
<div class="panel panel-warning"> 
«div class="panel-heading"> 
<h3 class="panel-title"> 面 板 标 题 </h3> 
</div> 
<div class="panel-body"> 
这 是 一 个 基本 的 面板 
</div> 
</div> 
<div class="panel panel-danger"> 
<div class="panel-heading"> 
«h3 class="panel-title"> 面 板 标题 </h3> 
</div> 
<div class="panel-body"> 
这 是 一 个 基本 的 面板 
</div> 
</div> 


</body> 
«/html» 


二 
结果 如 下 所 示 : 
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这 是 一 个 基本 的 面板 


面板 标题 


这 是 一 个 基本 的 面板 


面板 标题 


这 是 一 个 基本 的 面板 


面板 标题 


这 是 一 个 基本 的 面板 


面板 标题 


这 是 一 个 基本 的 面板 


带 表格 的 面板 


为 了 在 面板 中 创建 一 个 无 边框 的 表格 ， 我 们 可 以 在 面板 中 使 用 class .table。 假 设 
有 个 <div> 包含 .panel-body， 我 们 可 以 向 表格 的 顶部 添加 额外 的 边框 用 来 分 隔 。 
如 果 没 有 包含 .panel-body 的 <div>， 则 组 件 会 无 中 断 地 从 面板 头 部 移动 到 表格 。 


下 面 的 实例 演示 了 这 点 : 
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<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 带 表 格 的 面板 </tit1Le> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="panel panel-default"> 
<div class="panel-heading"> 
<h3 class="panel-title"> 面 板 标 题 </h3> 
</div> 
<div class="panel-body"> 
这 是 一 个 基本 的 面板 
</div> 
«table class="table"> 
<th> 产 品 </th><th> 价 格 </th> 
<tr><td> 产 品 A</td><td>200</td></tr> 
<tr><td> 产 品 B«/td»«td»400«/td»«/tr» 
</table> 
</div> 
«div class-"panel panel-default"> 
«div class="panel-heading"> 面 板 标题 </div> 
«table class="table"> 
<th> 产 品 </th><th> 价 格 </th> 
<tr><td> 产 品 A</td><td>200</td></tr> 
<tr><td> 产 品 B</td><td>400</td></tr> 
</table> 
</div> 


</body> 
«/html» 


:| 
结果 如 下 所 示 : 


面板 标题 
这 是 一 个 基本 的 面板 


带 列表 组 的 面板 


我 们 可 以 在 任何 面板 中 包含 列表 组 ， 通 过 在 <div> 元 素 中 添加 .panel 和 .panel- 
default 类 来 创建 面板 ， 并 在 面板 中 添加 列表 组 。 您 可 以 从 列表 组 一 章 中 学 习 如 何 


创建 列表 组 。 


价格 
200 


400 


价格 
200 


400 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 带 列表 组 的 面板 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="panel panel-default"> 
«div class="panel-heading"> 面 板 标题 </div> 
«div class="panel-body"> 
<p> 这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 
这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 
这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 
这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 
</p> 
</div> 
«ul class="]ist-group"> 
«li class="list-group-item"> 免 费 域名 注册 </1i> 
«li class="1list-group-item"> 免 费 Window 空间 托管 </1i> 
«li class="1list-group-item"> 图 像 的 数量 </1i> 
«li class-"list-group-item"»24*7 支持 </1i> 
«li class="1list-group-item"> 每 年 更 新 成 本 </1i> 
</ul> 
</div> 


</body> 
</html> 


0 ER" 
结果 如 下 所 示 : 


W3School Bootstrap 教程 


面板 标题 
这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 


的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 这 是 一 个 基本 的 面板 内 容 。 
这 是 一 个 基本 的 面板 内 容 。 


免费 域名 注册 

免费 Window 空间 托管 
图 像 的 数量 

24*7 支持 
每 年 更 新 成 本 
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Bootstrap Wells 


Well 是 一 种 会 引起 内 容 凹 陷 显 示 或 插图 效果 的 容器 <div>。 为 了 创建 Well, HE 
简单 地 把 内 容 放 在 带 有 class .well 的 «div» 中 即 可 。 下 面 的 实例 演示 了 一 个 默认 的 
Well : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 默认 的 Wwell«/title» 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«div class="wel1"> 您 好 ， 我 在 Well Hm! </div> 


</body> 
«/html» 


Rb -= 
结果 如 下 所 示 : 


您 好 , 我 在 Well 中 ! 


尺寸 大 小 


您 可 以 使 用 可 选 的 class well-lg or well-lg 来 改变 Well 的 尺寸 大 小 。 这 两 个 类 是 与 
well 类 结合 使 用 的 。 这 两 个 类 会 影响 内 边 距 (padding) ， 根 据 使 用 的 类 ，Well 会 
显示 得 更 大 或 者 更 小 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - well 的 尺寸 大 小 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="well well-1g"> 您 好 ， 我 在 大 的 well rm ! </div> 
«div class="well well-sm"> 您 好 ， 我 在 小 的 well 中 1</div> 


</body> 
«/html» 


:| 
结果 如 下 所 示 : 


您 好 ， 我 在 大 的 Well 中 ! 


您 好 ， 我 在 小 的 Well 中 ! 


Bootstrap 插件 


Bootstrap 插件 概览 


在 前 面 布局 组 件 章节 中 所 讨论 到 的 组 件 仅仅 是 个 开始 。Bootstrap 自 带 12 种 
jQuery 插件 ， 扩 展 了 功能 ， 可 以 给 站 点 添加 更 多 的 互动 。 即 使 您 不 是 一 名 高 级 的 
JavaScript 开发 人 员 ， 您 也 可 以 着 手 学 习 Bootstrap 的 JavaScript 插件 。 利 用 
Bootstrap 数据 API (Bootstrap Data API) ， 大 部 分 的 插件 可 以 在 不 编写 任何 代码 
的 情况 被 触发 。 


站 点 引用 Bootstrap 插件 的 方式 有 两 种 : 


e 单独 引用 : 使 用 Bootstrap 的 个 别 的 “js 文件 。 一 些 插件 和 CSS 组 件 依赖 于 其 
他 插件 。 如 果 您 单独 引用 插件 ， 请 先 确 保 弄 请 这 些 插件 之 间 的 依赖 关系 。 
e 编译 (同时) 引用 : 使 用 bootstrap.js 或 压缩 版 的 bootstrap.min.js。 


不 要 尝试 同时 引用 这 两 个 文件 ， 因 为 bootstrap.js 和 bootstrap.min.js 都 
包含 了 所 有 的 插件 。 


所 有 的 插件 依赖 于 jQuery。 所 以 必须 在 插件 文件 之 前 引用 jQuery。 请 访问 
bower.json 查看 Bootstrap 当前 支持 的 jQuery 版 本 。 


data 属性 


e 你 可 以 仅仅 通过 data 属性 API 就 能 使 用 所 有 的 Bootstrap 插件 ， 无 需 写 一 行 
JavaScript 代码 。 这 是 Bootstrap 中 的 一 等 API， 也 应 该 是 你 的 首选 方式 。 

e 话 又 说 回来 ， 在 某 些 情况 下 可 能 需要 将 此 功能 关闭 。 因 此 ， 我 们 还 提供 了 关闭 
data 属性 API 的 方法 ， 即 解除 以 data-api 为 命名 空间 并 绑 定 在 文档 上 的 事 
件 。 就 像 下 面 这 样 : 


$(document).off('.data-api') 


。 如 需 关 闭 一 个 特定 的 插件 ， 只 需要 在 data-api 命名 空间 前 加 上 该 插件 的 名 称 作 
为 命名 空间 即 可 ， 如 下 所 示 : 


$(document).off('.alert.data-api') 


编程 方式 的 API 


我 们 为 所 有 Bootstrap 插件 提供 了 纯 JavaScript 方式 的 API。 所 有 公开 的 API 都 是 
Bu anms 并 且 返 回 其 所 操作 的 元 素 集合 OÈ: 和 jQuery 的 调用 形 
式 一 致 ) 。 例 如 : 


$(".btn.danger").button("toggle").addClass("fat") 


所 有 的 方法 都 可 以 接受 一 个 可 选 的 选项 对 象 作 为 参数 ， 或 者 一 个 代表 特定 方法 的 字 
符 串 ， 或 者 不 带 任何 参数 (这 种 情况 下 ， 将 会 初始 化 插件 为 默认 行为 ) ， 如 下 所 
7: 


// 初始 化 为 默认 行为 

$("4myModal").modal() 

// 初始 化 为 不 支持 键盘 
$("4myModal").modal(( keyboard: false }) 
// 初始 化 并 立即 调用 show 
$("4myModal").modal('show') 


每 个 插件 在 Constructor RELER T E i A] E 
数 : $.fn.popover.Constructor。 如 果 您 想 获 取 某 个 特定 插件 的 实例 ， 可 以 直接 通过 
页 面 元 素 获 取 : 


$('[rel-popover]').data('popover'). 


避免 命名 空间 冲突 


某 些 时 候 Bootstrap 插件 可 能 需要 与 其 他 UI 框架 一 起 使 用 。 在 这 种 情况 下 ， 可 能 会 
发 生命 名 空间 冲突 。 如 果 不 幸 发 生 了 这 种 情况 ， 你 可 以 通过 调用 插件 的 
.noConflict 方法 恢复 其 原始 值 。 


// 返回 $.fn.button 之 前 所 赋 的 值 

var bootstrapButton = $.fn.button.noConflict() 
// 为 $().bootstrapBtn 赋予 Bootstrap 功能 
$.fn.bootstrapBtn = bootstrapButton 


Aoo“ 


事件 


qus 为 大 多 数 插件 的 独特 行为 提供 了 自 定义 事件 。 一 般 来 说 ， 这 些 事件 有 两 
种 形式 : 
e 动词 不 定式 : 这 会 在 事件 开始 时 被 触发 。 例 如 ex show. 动词 不 定式 事件 提供 
了 preventDefault 功能 。 这 使 得 在 事件 开始 前 可 以 停止 操作 的 执行 。 


$('4myModal').on('show.bs.modal', function (e) { 
// 阻止 模 态 框 的 显示 
if (!data) return e.preventDefault() 


;) 


e 过 去 分 词 形式 : 这 会 在 动作 执行 完毕 之 后 被 触发 。 例 如 ex: shown. 


Bootstrap 过 涛 效果 (Transition) 插件 


过 渡 效 果 (Transition). 插件 提供 了 简单 的 过 渡 效 果 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 除了 其 他 的 JS 文件 ， 您 还 需要 引 
用 transition.js。 或 者 ， 正 如 Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 
bootstrap.js 或 压缩 版 的 bootstrap.min.js。 


Transition.js 是 transitionEnd 事件 和 CSS 过 渡 效 果 模 拟 器 的 基本 帮助 器 类 。 它 被 
其 他 插件 用 来 检查 CSS 过 渡 效 果 支 持 ， 并 用 来 获取 过 渡 效 果 。 


使 用 案例 


过 渡 效 果 (Transition) 插件 的 使 用 案例 : 


e 具有 幻灯 片 或 淡 入 效果 的 模 态 对 话 框 。 具 体 实例 参见 Bootstrap TATE 
(Modal) 插件 。 

e 具有 淡出 效果 的 标签 页 。 具 体 实例 参见 Bootstrap 标签 页 (Tab) 插件 。 

e 具有 淡出 效果 的 警告 框 。 具体 实例 参见 Bootstrap 警告 框 (Alert) 插件 。 

e 具有 幻灯 片 效 果 的 轮 播 板 。 具 体 实 例 参 见 Bootstrap 轮 播 (Carousel) 插件 。 


Bootstrap 1 44€ (Modal) 插件 


模 态 框 (Moda) 是 覆盖 在 父 窗 体 上 的 子 窗 体 。 通 常 ， 目 的 是 显示 来 自 一 个 单独 的 
源 的 内 容 ， 可 以 在 不 离开 父 窗 体 的 情况 下 有 一 些 互 动 。 子 窗 体 可 提供 信息 、 交 互 


o 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 modal.js。 或 者 ， 正 如 
Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.js。 

用 法 
您 可 以 切换 模 态 框 (Modal) 插件 的 隐藏 内 容 : 
e 通过 data 属性 : 在 控制 器 元 素 〈 比 如 按钮 或 者 链接 ) 上 设置 属性 data- 
toggle="modal"， 同 时 设置 data-target="#identifier" 或 href="#identifier" 
来 指定 要 切换 的 特定 的 模 态 框 ( 带 有 id="identifier") 。 


e 通过 JavaScript : 使 用 这 种 技术 ， 您 可 以 通过 简单 的 一 行 JavaScript 来 调用 
带 有 id="identifier" 的 模 态 框 : 


$('#identifier').modal(options) 


实例 


一 个 静态 的 模 态 窗口 实例 ， 如 下 面 的 实例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 模 态 框 (Modal) 插件 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


<h2> 创 建 模 态 框 (Modal) </h2> 

«1-- 按钮 触发 模 态 框 - -> 

«button class="btn btn-primary btn-lg" data-toggle="modal" 
data-target="#myModal"> 
开始 演示 模 态 框 

«/button» 


«1-- 模 态 框 (Modal) --» 

«div class-"modal fade" id-"myModal" tabindex-'"-1" role="dialog" 
aria-labelledby-z"myModalLabel" aria-hidden-z"true'» 
«div class-"modal-dialog"» 

«div class-"modal-content'"» 
«div class-"modal-header"-» 
«button type="button" class-'close" 
data-dismiss-"modal" aria-hidden-'"true"» 
&times; 
«/button» 
<h4 class-"modal-title" id-"myModalLabel"» 
模 态 框 (Modal) 标题 
«/h4» 
«/div» 
«div class-"modal-body"» 
在 这 里 添加 一 些 文 本 
«/div» 
«div class-"modal-footer"-» 
«button type="button" class="btn btn-default" 
data-dismiss-"modal"»X ijj 


«/button» 
«button type="button" class="btn btn-primary'"- 
提交 更 改 
«/button» 
«/div» 
«/div»«!-- /.modal-content --» 
«/div»«!-- /.modal --» 
«/body» 
«/html» 
sj o ë Ol 








结果 如 下 所 示 : 


VS 
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模 态 框 ( Modal ) 标题 


在 这 里 添加 一 些 文 本 





代码 讲解 : 


使 用 模 态 窗口 ， 您 需要 有 某 种 触发 器 。 您 可 以 使 用 按钮 或 链接 。 这 里 我 们 使 用 
的 是 按钮 。 

如 果 您 仔细 查看 上 面 的 代码 ， 您 会 发 现在 <button> 标签 中 ，data- 
target="#myModal" 是 您 想 要 在 页 面 上 加 载 的 模 态 框 的 目标 。 您 可 以 在 页 面 

上 创建 多 个 模 态 框 ， 然 后 为 每 个 模 态 框 创建 不 同 的 触发 器 。 现 在 ， 很 明显 ， 您 
不 能 在 同一 时 间 加 载 多 个 模块 ， 但 您 可 以 在 页 面 上 创建 多 个 在 不 同时 间 进 行 加 


载 。 
在 模 态 框 中 需要 注意 两 点 : 
o 第 一 是 .modal， 用 来 把 <div> 的 内 容 识 别 为 模 态 框 。 
o 第 二 是 .fade class。 当 模 态 框 被 切换 时 ， 它 会 引起 内 容 淡 入 淡出 。 
aria-labelledby="myModalLabel"， 该 属性 引用 模 态 框 的 标题 。 
属性 aria-hiddenz"true" 用 于 保持 模 态 窗口 不 可 见 ， 直 到 触发 器 被 触发 为 止 
(比如 点 击 在 相关 的 按钮 上 ) 。 
«div class-"modal- header"», modal-header 是 为 模 态 窗口 的 头 部 定义 样式 的 
类 。 
class="close"，close 是 一 个 CSS class， 用 于 为 模 态 窗口 的 关闭 按钮 设置 祥 
式 。 
data-dismiss="modal"， 是 一 个 自 定义 的 HTML5 data 属性 。 在 这 里 它 被 用 
于 关闭 模 态 窗口 。 
class="modal-body"， 是 Bootstrap CSS 的 一 个 CSS class， 用 于 为 模 态 窗 
口 的 主体 设置 样式 。 
class="modal-footer"， 是 Bootstrap CSS 的 一 个 CSS class， 用 于 为 模 态 窗 
口 的 底部 设置 样式 。 
data-toggle="modal"，HTML5 自 定 义 的 data 属性 data-toggle 用 于 打开 模 
态 窗口 。 


选项 


有 一 


选项 可 以 用 来 定制 模 态 窗口 (Modal Window) 它们 是 通过 


data mm JavaScript 来 传递 的 。 下 表 列 出 了 这 些 选 


选项 名 称 


backdrop 


keyboard 


Show 


remote 


方法 


类 型 / 默 
认 值 


boolean 
或 
string 
'static' 
默认 
值 : 
true 


boolean 
默认 
值 : 
true 


boolean 
默认 
值 : 
true 


path ER 
认 值 : 
false 


Data 属 
性 名 称 


data- 
backdrop 


data- 
keyboard 


data- 
Show 


data- 
remote 


指定 一 个 静态 的 背景 ， 


当 用 户 点 击 模 态 框 外 


当 按 下 escape 键 时 关闭 模 态 框 ， 设 置 为 falt 


当初 始 化 时 显示 模 态 框 。 


使 用 jQuery .load 方法 ， 为 模 态 框 的 主体 注 ， 
容 。 如 下 面 的 实例 所 


4^: &lt;a data-toggle="modal" href=" 


下 面 是 一 些 可 与 modal() 一 起 使 用 的 有 用 的 方法 。 


zs 描述 实例 


Options: ms mm — | 
oe 接受 $('Zidentifier').modal((keyboard: false}) 


Toggle: 切换 PUTATIS, RE 
modal('toggle) ， 模 态 $('sidentifier').modal('toggle') 


Show: 打开 


modal('show') 模 太 $( '£identifier' ) .modal( ! Show' ) 


Hide: 隐藏 


modal('hide') 模 太 $( '#identifier ! ) .modal( 'hide' ) 


实例 
下 面 的 实例 演示 了 方法 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 模 态 框 (Modal) 插件 方法 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<h2> 模 态 框 (Modal) 插件 方法 </h2> 
«1-- 按钮 触发 模 态 框 --> 


«button class="btn btn-primary btn-lg" data-toggle-"modal" data-ta! 
开始 演示 模 态 框 


W3School Bootstrap 教程 


«/button» 


«1-- ERA (Modal) --» 

«div class-"modal fade" id-'"myModal" tabindex-'"-1" role="dialog" 
aria-labelledby-z"myModalLabel" aria-hidden-z"true'» 
«div class-"modal-dialog"» 

«div class-"modal-content"» 
«div class-"modal-header"» 
«button type="button" class-"close" data-dismiss-"moda. 
aria-hidden-z"true"»x 
«/button» 
«h4 class-"modal-title" id-"myModalLabel'"-» 
模 态 框 (Modal) 标题 
«/h4» 
«/div» 
«div class-"modal-body"» 
按 下 ESC 按钮 退出 。 
</div> 
<div class="modal-footer"> 
«button type="button" class="btn btn-default" 
data-dismiss="modal"> 关 闭 
</button> 
«button type="button" class="btn btn-primary"> 
提交 更 改 
«/button» 
«/div» 
«/div»«!-- /.modal-content --» 
«/div»«!-- /.modal-dialog --» 

«/div»«!-- /.modal --» 

«script» 
$(function () { $('4myModal').modal(( 

keyboard: true 


})}); 


</script> 


</body> 
</html> 


BJE EE) 





结果 如 下 所 示 : 


模 态 框 ( Modal ) 标题 


按 下 ESC 按钮 退出 。 





只 需要 点 击 ESC 键 ， 模 态 窗口 即 会 退出 。 
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事件 


下 表 列 出 了 模 态 框 中 要 用 到 事件 。 这 些 事件 可 在 函数 中 当 钩 子 使 用 。 


事件 描述 


在 调用 
Show 
方法 后 
触发 。 


当 模 态 
框 对 用 
户 可 见 
时 触发 
shown.bs.modal x 
CSS 
过 渡 效 


EX) e 


show.bs.modal $('&4identifier'). 


$('sidentifier'). 


hide.bs.modal 实例 方 $('4identifier'). 
法 时 触 
发 。 
当 模 态 
框 完全 

hidden.bs.modal ”对 用 户 $('&identifier'). 
隐藏 时 
Bb x. 


实例 
下 面 的 实例 演示 了 事件 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 


实例 


on('show.bs.modal', func 


on('shown.bs.modal', fun 


on('hide.bs.modal', func 


on('hidden.bs.modal', fu 


«title»Bootstrap 实例 - 模 态 框 (Modal) 插件 事件 </title> 

«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src-z"/scripts/jquery.min.js"»«/script» 

«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 


«/head» 
«body» 


<h2> 模 态 框 (Modal) 插件 事件 </h2> 


«1-- 按钮 触发 模 态 框 --> 

«button class="btn btn-primary btn-lg" data-toggle-"modal" data-tal 
开始 演示 模 态 框 

</button> 


<!-- 模 态 框 (Modal) --» 
«div class-"modal fade" id="myModal" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-header"> 
«button type="button" class="close" data-dismiss-"moda. 
aria-hidden="true">x 
</button> 
<h4 class="modal-title" id="myModalLabel"> 
模 态 框 (Modal) 标题 
</h4> 
</div> 
<div class="modal-body"> 
点 击 关 闭 按钮 检查 事件 功能 。 
«/div» 
«div class-"modal-footer"-» 
«button type="button" class="btn btn-default" 
data-dismiss-"modal'"» 


关闭 
</button> 
«button type="button" class="btn btn-primary"> 
是 交 更 改 
</button> 
</div> 
</div><!-- /.modal-content --> 
</div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 
<script> 
$(function () ( $('#myModal').modal('hide')})}); 
«/script» 
«script» 


$(function () ( $('4myModal').on('hide.bs.modal', function () { 
alert(' 咖 ， 我 听 说 您 喜欢 模 态 框 ...');}) 
3); 


«/script» 


«/body» 
«/html» 


B] ———————————X————— — (E 
结果 如 下 所 示 : 
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正如 上 面 实例 所 示 ， 如 果 您 点 击 了 关闭 按钮 ， 即 hide 事件 ， 则 会 显示 一 个 警告 消 


Ej 
^o 
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Bootstrap FH% (Dropdown) 插件 


Bootstrap FH € 这 一 章 讲 解 了 下 拉 菜 单 ， 但 是 没有 涉及 到 交互 部 分 ， 本 章 将 具 
体 讲解 下 拉 菜 单 的 交互 。 使 用 下 拉 菜 单 (Dropdown) 插件 ， 您 可 以 向 任何 组 件 
(比如 导航 栏 、 标 签 页 、 胶 襄 式 导航 菜单 、 按 钮 等 ) 添加 下 拉 菜 单 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 dropdown.js。 或 者 ， 正 如 
Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.js。 


用 法 
您 可 以 切换 下 拉 菜 单 (Dropdown) 插件 的 隐藏 内 容 : 
。 通过 data 属性 : 向 链接 或 按钮 添加 data-toggle2"dropdown" 来 切换 下 拉 菜 
单 ， 如 下 所 示 : 


&lt;div class-'"dropdown"&gt; 
&lt;a data-toggle-"dropdown" href="#"&gt ;下拉 菜单 (Dropdown) fih 
&lt;ul class="dropdown-menu" role="menu" aria-labelledby-'dLe 


&lt;/ul&gt; 
&lt;/div&gt; 
E "I 


如 果 您 需要 保持 链接 完整 〈 在 浏览 器 不 启用 JavaScript 时 有 用 ) ， 请 使 用 
data-target 属性 代替 href="#" : 





&lt;div class-"dropdown"&gt; 

&lt;a id-"dLabel" role="button" data-toggle-"dropdown" data-t 

下 拉 菜 单 (Dropdown) &lt;span class-"caret"&gt;&lt;/span&gt; 
&lt;/a&gt; 


&lt;ul class-"dropdown-menu" role="menu" aria-labelledby-'dLe 


&lt;/ul&gt; 
&lt;/div&gt; 


eee 
e 通过 JavaScript : 通过 JavaScript 调用 下 拉 菜 单 切换 ， 请 使 用 下 面 的 方法 : 





$('.dropdown-toggle').dropdown() 


实例 


在 导航 栏 内 
下 面 的 实例 演示 了 在 导航 栏 内 的 下 拉 菜 单 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 默认 的 导航 栏 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«nav class-"navbar navbar-default" role-z"navigation'"» 
«div class-'navbar-header'» 
«a class-'"navbar-brand" href="#">W3Cschool</a> 
«/div» 
«div» 
«ul class="nav navbar-nav"» 
«li class="active"><a href="#">i0S</a></1i> 
<li><a href="#">SVN</a></1i> 
«li class="dropdown"> 
«a href="#" class="dropdown-toggle" data-toggle="dropd 
Java 
<b class="caret"></b> 
</a> 
«ul class="dropdown-menu"> 
«li»«a href="#">jmeter</a></1i> 
<li><a href="#">EJB</a></li> 
<li><a href="#">Jasper Report</a></li> 
<li class="divider"></li> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
«/ul» 
</li> 
</ul> 
</div> 
</nav> 


</body> 
</html> 





结果 如 下 所 示 : 


W3Cschool iOS SVN Java ~ 


在 标签 页 内 
下 面 的 实例 演示 了 在 标签 页 内 的 下 拉 菜 单 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 带 有 下 拉 菜 单 的 标签 页 </tit1Le> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


<p> 带 有 下 拉 菜 单 的 标签 页 </p> 
«ul class="nav nav-tabs"> 
«li class="active"><a href="#">Home</a></1i> 
<li><a href="#">SVN</a></1i> 
<li><a href="#">i0S</a></1i> 
<li><a href="#">VB.Net</a></1i> 
«li class="dropdown"> 
«a class="dropdown-toggle" data-toggle-"dropdown" href="#"> 
Java <span class="caret"></span> 
</a> 
«ul class="dropdown-menu"> 
<li><a href="#">Swing</a></1i> 
<li><a href="#">jMeter</a></1i> 
<li><a href="#">EJB</a></li> 
«li class="divider"></1i> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«/ul» 
</li> 
<li><a href="#">PHP</a></li> 
</ul> 


</body> 
</html> 


ED M 
结果 如 下 所 示 : 


带 有 下 拉 菜 单 的 标签 


Home SVN iOS VB.Net Java ~ PHP 


Swing 





jMeter 
EJB 


分 离 的 链接 


方法 
下 拉 菜 单 切换 有 一 个 简单 的 方法 用 来 显示 或 隐藏 下 拉 菜 单 。 
$().dropdown('toggle') 


实例 


下 面 的 实例 演示 了 下 拉 菜 单 (Dropdown) 插件 方法 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 下 拉 菜 单 (Dropdown) 插件 方法 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js'»«/script» 
</head> 
<body> 


<nav class="navbar navbar-default" role="navigation"> 
«div class="navbar -header "> 
<a class="navbar-brand" href="#">W3Cschool</a> 
</div> 


<div id="myexample"> 
<ul class="nav navbar-nav"> 
«li class="active"><a href="#">i0S</a></1i> 
<li><a href="#">SVN</a></li> 
<li class="dropdown"> 
<a href="#" class="dropdown-toggle">Java <b 
class="caret"></b></a> 
«ul class="dropdown-menu"> 
<li><a id="action-1" href="#"> 
jmeter</a> 
</li> 
<li><a href="#">EJB</a></li> 
<li><a href="#">Jasper Report</a></li> 
<li class="divider"></li> 
<li><a href="#"> 分 离 的 链接 </a></1i> 
«li class="divider"></1i> 
<li><a href="#"> 另 一 个 分 离 的 链接 </a></1i> 
«/ul» 
</li> 
</ul> 
</div> 
</nav> 
</div> 
<script> 
$(function(){ 
$(".dropdown-toggle").dropdown('toggle'); 
31); 


</script> 


</body> 
</html> 


EA 000 了 | 
结果 如 下 所 示 : 
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W3Cschool iOS  SVN  Java- 





jmeter 
EJB 
Jasper Report 


分 高 的 链接 


另 一 个 分 高 的 链接 
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Bootstrap 滚动 监听 (Scrollspy) 插件 


滚动 监听 (Scrollspy) 插件， 即 自动 更 新 导航 插件 ， 会 根据 滚动 条 的 位 置 自 动 更 新 
对 应 的 导航 目标 。 其 基本 的 实现 是 随 着 您 的 滚动 ， 基 于 滚动 条 的 位 置 向 导航 栏 添加 
.active class。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 scrollspy.js。 或 者 ， 正 如 
Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.js。 


用 法 
您 可 以 向 顶 部 导 航 添加 深 滚动 动 监 监听 行 为 : 


过 data 属性 : 向 您 想 要 监听 的 元 素 (通常 是 body) 添加 data- 
dé 'scroll"。 然 后 添加 带 有 Bo av Mp ri ID 或 class 的 
属性 data-target。 为 了 它 能 正常 工作 ， 您 必须 确保 页 面 主体 中 有 匹配 您 所 要 
监听 链接 的 ID 的 元 素 存 在 。 


&lt;body data-spy="scroll" data-target-".navbar-example"&gt; 


&lt;div class-'navbar-example"&gt; 
&lt;ul class="nav nav-tabs"&gt; 


&lt;/ul&gt; 
&lt;/div&gt; 


&lt;/body&gt; 


e 通过 JavaScript : 您 可 以 通过 JavaScript 调用 滚动 监听 ， 选 取 要 监听 的 元 
素 ， 然 后 调用 .scrollspy() 函数 : 


$('body').scrollspy(( target: '.navbar-example' }) 


实例 
下 面 的 实例 演示 了 通过 data 属性 使 用 滚动 监听 (Scrollspy) 插件 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 滚动 监听 (Scrollspy) 插件 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 


«script srcz"/scripts/jquery.min.js'"»«/script» 

«script src-z"/bootstrap/js/bootstrap.min.js'»«/script» 
«/head» 
«body» 


«nav id-"navbar-example" class-'"navbar navbar-default navbar-stati« 
«div class-"navbar-header'» 
«button class-"navbar-toggle" type="button" data-toggle-'col. 
data-target-".bs-js-navbar-scrollspy'"- 
«span class="sr-only"> 切 换 导 航 </span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
«a class-"navbar-brand" href="#"> 教 程 名 称 </a> 
</div> 
<div class="collapse navbar-collapse bs-js-navbar-scrollspy"> 
«ul class="nav navbar-nav"> 
<li><a href="#ios">i0S</a></1i> 
<li><a href="#svn">SVN</a></1i> 
<li class="dropdown"> 
«a href="#" id-"navbarDropi" class="dropdown-toggle" 
data-toggle="dropdown">Java 
<b class="caret"></b> 
</a> 
«ul class="dropdown-menu" role="menu" 
aria-labelledby="navbarDrop1"> 
<li><a href="#jmeter" tabindex="-1">jmeter</a></li> 
<li><a href="#ejb" tabindex="-1">ejb</a></li> 
«li class="divider"></1i> 
<li><a href="#spring" tabindex="-1">spring</a></li> 
</ul> 
</li> 
</ul> 
</div> 
</nav> 
«div data-spy="scroll" data-target-"Znavbar-example" data-offset="( 
style-"height:200px;overflow:auto; position: relative;"> 
«h4 id="ios">i0S</h4> 
«p»iOS 是 一 个 由 茶 果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 年 首次 发 布 
TV, iOS 派生 自 OS X， 它 们 共享 Darwin 基础 。0S X 操作 系统 是 用 在 茶 果 电 
</p> 
<h4 id="svn">SVN</h4> 
<p>Apache Subversion， 通 常 缩写 为 SVN， 是 一 款 开 源 的 版 本 控制 系统 软件 。Suk 
</p> 
<h4 id="jmeter">jMeter</h4> 
<p>jMeter 是 一 款 开源 的 测试 软件 。 它 是 100% ż Java 应 用 程序 ， 用 于 负载 和 性 
«/p» 
«h4 id="ejb">EJB</h4> 
«p»Enterprise Java Beans (EJB) 是 一 个 创建 高 度 可 扩展 性 和 强大 企业 级 应 用 程 
</p> 
<h4 id="spring">Spring</h4> 
<p>Spring 框架 是 一 个 开源 的 Java 平台 ， 为 快速 开发 功能 强大 的 Java 应 用 程序 


</p> 
<p>Spring 框架 最 初 是 由 Rod Johnson 编写 的 ， 在 2003 F 6 月 首次 发 布 于 / 
«/p» 

«/div» 


«/body» 
«/html» 


4 ] — —cEm 

















结果 如 下 所 示 : 


iOS 
iOS 是 一 个 由 苹果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 FERAT iPhone, iPod 


Touch 和 Apple TV. iOS 派生 自 OS X, 它们 共享 Darwin 基础 。OS X 操作 系统 是 用 在 苹果 电脑 
E, iOS 是 苹果 的 移动 版 本 。 


SVN 


Apache Subversion， 通 常 缩写 为 SVN， 是 一 款 开 源 的 版 本 控制 系统 软件 。Subversion 由 CollabNet 
公司 在 2000 年 创建 。 但 是 现在 它 已 经 发 展 为 Apache Software Foundation 的 一 个 项 目 ， 因 此 拥有 
丰 语 的 开发 人 员 和 用 户 社区 。 = 


选项 


N 


通过 data 属性 或 JavaScript 来 传递 。 下 表 列 出 了 这 些 选 项 


n 类 型 /默认 什 uc ous 描述 
number 默认 f SHARA, RA AEI 
offset 值 : 10 data-offset Bs. 


方法 


.scrollspy('refresh") : 当 通 过 JavaScript 调用 scrollspy 方法 时 ， 您 需要 调用 
.refresh 方法 来 更 新 DOM。 这 在 DOM 的 任意 元 素 发 生变 更 ( 即 ， 您 添加 或 移 除 
了 某 些 元 素 ) 时 非常 有 用 。 下 面 是 使 用 该 方法 的 语法 。 


$('[data-spyz"scroll"]').each(function () ( 
var $spy = $(this).scrollspy('refresh') 
3) 


实例 
下 面 的 实例 演示 了 .scrollspy('refresh') 方法 的 用 法 : 


<!DOCTYPE html» 

«html» 

«head» 
«title»Bootstrap 实例 - 滚动 监听 (Scrollspy) 插件 方法 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js'»«/script» 

«/head» 

«body» 


«nav id-"myScrollspy" class-'"navbar navbar-default navbar-static" i 
«div class-'"navbar-header'» 
«button class-"navbar-toggle" type="button" data-toggle-'col. 
data-target-".bs-js-navbar-scrollspy"- 
«span class="sr-only"> 切 换 导 航 </span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
«a class-"navbar-brand" href="#"> 教 程 名 称 </a> 
</div> 
«div class="collapse navbar-collapse bs-js-navbar-scrollspy"> 
«ul class="nav navbar-nav"> 
<li class="active"><a hrefz'£Zios"»2i0S«/a»«/li-» 
<li><a href="#svn">SVN</a></1i> 
<li class="dropdown"> 
«a href="#" id-"navbarDropi" class="dropdown-toggle" 
data-toggle="dropdown">Java 
<b class="caret"></b> 
</a> 
«ul class="dropdown-menu" role="menu" 
aria-labelledby="navbarDrop1"> 
<li><a href="#jmeter" tabindex="-1">jmeter</a></li> 
<li><a href="#ejb" tabindex="-1">ejb</a></li> 
«li class="divider"></1i> 
<li><a href="#spring" tabindex="-1">spring</a></li> 
</ul> 
</li> 
</ul> 
</div> 
</nav> 
«div data-spy="scroll" data-target="#myScrollspy" data-offset="0" 
style-"height:200px;overflow:auto; position: relative;"> 
«div class-"section'"» 
«h4 id-"ios"»iO0S«small»«a href="#" onclick-"removeSection(th: 
&times; 删除 该 部 分 </a></small> 
</h4> 
«p»iOS 是 一 个 由 茶 果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 年 首次 2 


TV, iOS 派生 自 OS X， 它 们 共享 Darwin 基础 。0S X 操作 系统 是 用 在 荣 果 电 
«/div» 
«div class="section"> 

«h4 id-"svn"»SVN«small»«/small»«/h4» 

«p»Apache Subversion， 通 常 缩写 为 SVN， 是 一 款 开 源 的 版 本 控制 系统 软件 。 
«/div» 
«div class="section"> 

«h4 id-"jmeter"»jMeter«small»«a href="#" onclick-"removeSect: 

&times; 删除 该 部 分 </a></small> 

</h4> 

<p>jMeter 是 一 款 开 源 的 测试 软件 。 它 是 100% 纯 Java 应 用 程序 ， 用 于 负载 
</div> 
<div class="section"> 

<h4 id="ejb">EJB</h4> 

<p>Enterprise Java Beans (EJB) 是 一 个 创建 高 度 可 扩展 性 和 强大 企业 级 应 . 
</div> 
<div class="section"> 

<h4 id="spring">Spring</h4> 

<p>Spring 框架 是 一 个 开源 的 Java 平台 ， 为 快速 开发 功能 强大 的 Java 应 用 : 

<p>Spring 框架 最 初 是 由 Rod Johnson 编写 的 ， 在 2003 年 6 月 首次 发 布 


«/div» 

«/div» 

«script type-z"text/javascript"» 
$(function()[ 


removeSection - function(e) ( 
$(e).parents(".section").remove(); 
$('[data-spyz"scroll"]').each(function () { 

var $spy = $(this).scrollspy('refresh') 

3); 

} 

$("4myScrollspy").scrollspy(); 

3): 


«/script» 


«/body» 
«/html» 


E — B 
结果 如 下 所 示 : 





IOS x 删除 该 部 分 

iOS 是 一 个 由 苹果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 年 站 ;次 发 布 iPhone、iPod 

Touch 和 Apple TV. iOS 派生 自 OS X, 它们 共享 Darwin 基础 。OS X 操作 系统 是 用 在 苹果 电脑 

E, iOS 是 苹果 的 移动 版 本 。 

SVN 

Apache Subversion， 通 常 缩写 为 SVN， 是 一 款 开 源 的 版 本 控制 系统 软件 。Subversion 由 CollabNet 
公司 在 2000 年 创建 。 但 是 现在 它 已 经 发 展 为 Apache Software Foundation 的 一 个 项 目 ， 因 此 拥有 
丰富 的 开发 人 员 和 用 户 社区 。 = 


事件 


下 表 列 出 了 滚动 监听 中 要 用 到 事件 。 这 些 事件 可 在 函数 中 当 钩 子 使 用 。 


事件 描述 


每 当 
= 
新 项 
目 被 
滚动 
activate.bs.scrollspy ”监听 $('4myScrollspy').on('activate.bs.scroll 


激活 


将 


实例 
下 面 的 实例 演示 了 activate.bs.scrollspy 事件 的 用 法 : 


<!DOCTYPE html» 

«html» 

«head» 
«title»Bootstrap 实例 - 滚动 监听 (Scrollspy) 插件 事件 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'"» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 

</head> 

<body> 


«nav id-"myScrollspy" class-'"navbar navbar-default navbar-static" i 
«div class-'"navbar-header'» 
«button class-"navbar-toggle" type="button" data-toggle-'col. 
data-target-".bs-js-navbar-scrollspy"- 
«span class="sr-only"> 切 换 导 航 </span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
«a class-"navbar-brand" href="#"> 教 程 名 称 </a> 
</div> 
«div class="collapse navbar-collapse bs-js-navbar-scrollspy"> 
«ul class="nav navbar-nav"> 
<li class="active"><a hrefz'£Zios"»2i0S«/a»«/li-» 
<li><a href="#svn">SVN</a></1i> 
<li class="dropdown"> 
«a href="#" id-"navbarDropi" class-'dropdown-toggle" 
data-toggle-"dropdown"» 
Java «b class="caret"></b> 
</a> 
<ul class="dropdown-menu" role="menu" 
aria-labelledby="navbarDrop1"> 
<li><a href="#jmeter" tabindex="-1">jmeter</a></li> 
<li><a href="#ejb" tabindex="-1">ejb</a></li> 
«li class="divider"></1i> 
<li><a href="#spring" tabindex="-1">spring</a></li> 
</ul> 
</li> 
</ul> 
</div> 
</nav> 
«div data-spy="scroll" data-target="#myScrollspy" data-offset="0" 
style-"height:200px;overflow:auto; position: relative;"> 
«div class-"section"» 
«h4 id-"ios"»2iO0S«small»«a href="#" onclick-"removeSection(th: 
&times; 删除 该 部 分 </a></small> 
</h4> 
«p»iOS 是 一 个 由 茶 果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 年 首次 2 
TV, iOS 派生 自 OS X， 它 们 共享 Darwin 基础 。0S X 操作 系统 是 用 在 茶 果 电 
«/div» 
«div class-"section'"» 
«h4 id-"svn"»SVN«small»«/small»«/h4» 
«p»Apache Subversion, 3É3$/55 7j SVN， 是 一 款 开源 的 版 本 控制 系统 软件 。 
</div> 
<div class="section"> 
<h4 id="jmeter">jMeter<small><a href="#" onclick="removeSect: 
&times; 删除 该 部 分 </a></small> 
</h4> 
<p>jMeter 是 一 款 开源 的 测试 软件 。 它 是 10096 25 Java 应 用 程序 ， 用 于 负载 
</div> 
<div class="section"> 
<h4 id="ejb">EJB</h4> 
<p>Enterprise Java Beans (EJB) 是 一 个 创建 高 度 可 扩展 性 和 强大 企业 级 应 


«/div» 

«div class-"section'» 
«h4 id-"spring"»Springc/h4» 
«p»Spring 框架 是 一 个 开源 的 Java 平台 ， 为 快速 开发 功能 强大 的 Java fW: 
<p>Spring 框架 最 初 是 由 Rod Johnson 编写 的 ， 在 2003 年 6 月 首次 发 布 


«/div» 

«/div» 

«script type-z"text/javascript"» 
$(function()[ 


removeSection - function(e) ( 

$(e).parents(".section").remove(); 

$('[data-spyz"scroll"]').each(function () ( 
var $spy - $(this).scrollspy('refresh') 


}); 


} 
$("#myScrollspy").scrollspy(); 
$('#myScrollspy').on('activate.bs.scrollspy', function () { 
var currentItem = $(".nav li.active > a").text(); 
$("#activeitem").html(" 目 前 您 正在 查看 - " + currentItem); 
}) 
3); 


«/script» 


«/body» 
«/html» 


a] | Ẹ 
结果 如 下 所 示 : 





Hh LT A Th 
PLAE L TA 


IOS x 删除 该 部 分 

iOS 是 一 个 由 苹果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 年 首 ;次 发 布 Phone、iPod 

Touch #0 Apple TV» iOS 派生 自 OS X， 它 们 共享 Darwin 基础 。OS X 操作 系统 是 用 在 苹果 电脑 

E, OS 是 苹果 的 移动 版 本 。 

SVN 

Apache Subversion, 18355585379 SVN, 是 一 款 开 源 的 版 本 皖 制 系统 软件 。Subversion 由 CollabNet 
公司 在 2000 年 创建 。 但 是 现在 它 已 经 发 展 为 Apache Software Foundation 的 一 个 项 目 ， 因 此 拥有 

丰 语 的 开发 人 员 和 用 户 社区 。 > 


Bootstrap 标签 页 (Tab) 插件 


标签 页 (Tab) 在 Bootstrap CUu 一 章 中 介绍 过 。 通 过 结合 一 些 data 属性 ， 
可 以 轻松 地 创建 一 个 标签 页 界面 。 通过 这 
胶 吉 式 标 签 页 其 至 是 下 拉 菜 单 标 签 页 中 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 tab.js。 或 者 ， 正 如 
Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.js; 


用 法 
您 可 以 通过 以 下 两 种 方式 启用 标签 页 : 


。 通 过 data 属性 : 您 需要 添加 data-toggle-"tab" 或 data-toggle-"pill" 到 锚 
文本 链接 中 。 


添加 nav 和 nav-tabs 类 到 ul 中 ， 将 会 占用 Bootstrap 标签 样式 ， 添 加 nav 
和 nav-pills 类 到 ul 中 ， 将 会 应 用 Bootstrap RERA. 
&lt;ul class-"nav nav-tabs"&gt; 
&lt;li&gt;&lt;a hrefz'"Zidentifier" data-toggle-"tab"'&gt;Home 
&lt;/ul&gt; 
E — B 





a 


e 通过 JavaScript : 您 可 以 使 用 Javscript 来 启用 标签 页 ， 如 下 所 示 : 
$('#myTab a').click(function (e) { 
e.preventDefault() 


$(this).tab('show') 
3) 


下 面 的 实例 演示 了 以 不 同 的 方式 来 激活 各 个 标签 页 : 


// 通过 名 称 选 取 标 签 页 
$('4myTab a[hrefz"Zprofile"]').tab('show') 


// 选取 第 一 个 标签 页 
$('4myTab a:first').tab('show') 


// 选取 最 后 一 个 标签 页 
$('4myTab a:last').tab('show') 


// 选取 第 三 个 标签 页 (从 9 开始 索引 ) 
$('#myTab li:eq(2) a').tab('show') 


淡 和 淡出 效果 


如 果 需 要 为 标签 页 设置 淡 人 淡出 效果 ， 请 添加 .fade 到 每 个 .tab-pane 后 面 。 第 一 
个 标签 页 必须 添加 .in 类 ， 以 便 淡 入 显示 初始 内 容 ， 如 下 面 实例 所 示 : 


«div class-"tab-content'-» 
«div class-"tab-pane fade in active" id-"home"2...«/div» 
«div class-"tab-pane fade" id-'"svn"»...«/div» 
«div class-"tab-pane fade" id-'"ios"»...«/div» 
«div class-"tab-pane fade" id-"java'»...«/div» 
«/div» 


实例 


下 面 的 实例 演示 了 使 用 data 属性 的 标签 页 (Tab) 揪 件 及 其 淡 和 人 淡出 的 效果 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 标签 页 (Tab) 插件 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script src-z"/bootstrap/js/bootstrap.min.js'"»«/script» 
</head> 
<body> 


«ul id-"myTab" class="nav nav-tabs"> 
<li class="active"> 
<a href="#home" data-toggle="tab"> 
W3Cschool Home 
</a> 
</li> 
<li><a href="#ios" data-toggle="tab">i0S</a></li> 
<li class="dropdown"> 
«a href="#" id="myTabDrop1" class="dropdown-toggle" 
data-toggle="dropdown">Java 
<b class="caret"></b> 
</a> 
«ul class="dropdown-menu" role="menu" aria-labelledby-"myTablI 
<li><a href="#jmeter" tabindex="-1" data-toggle-"tab"»jmet 
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a: 
</ul> 
</li> 
</ul> 
<div id="myTabContent" class="tab-content"> 
<div class="tab-pane fade in active" id="home"> 
<p>W3Cschoool¥% & X fee — T be Ets webi Riia, Juhfuj ek T Eh 
«/div» 
«div class-"tab-pane fade" id-z"ios"» 
«p»iOS 是 一 个 由 茶 果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 年 首次 2 
TV, iOS 派生 自 OS X， 它 们 共享 Darwin 基础 。0S X 操作 系统 是 用 在 茶 果 电 
«/div» 
«div class-z"tab-pane fade" id-"jmeter"- 
«p»jMeter 是 一 款 开源 的 测试 软件 。 它 是 100% 24 Java 应 用 程序 ， 用 于 负载 
«/div» 
«div class-"tab-pane fade" id="ejb"> 
«p»Enterprise Java Beans (EJB) 是 一 个 创建 高 度 可 扩展 性 和 强大 企业 级 应 
</p> 
</div> 
</div> 


</body> 
«/html» 


«| Z 
结果 如 下 所 示 : 











W3C ^ 


3Cschool Home iOS Java v 


W3Cschoool 荣 鸟 教程 是 一 个 提供 最 新 的 web 技术 站 点 ， 本 站 免费 提供 了 建站 相关 的 技术 文档 ,帮助 广 
大 web 技 术 爱 好 者 快速 入 | 并 建立 自己 的 网 站 。 菜 乌 先 飞 早 信行 一 学 的 不 促 是 技术 ， 更 是 梦想 。 


方法 


.$().tab : 该 方法 可 以 激活 标签 页 元 素 和 内 容 容器 。 标 签 页 需要 用 一 个 data-target 
或 者 一 个 指向 DOM 中 容器 节点 的 href。 


«ul class-"nav nav-tabs" id="myTab"> 
«li class-'active"»«a href="#identifier" data-toggle-"tab"»-Homec, 


«/ul» 
«div class-"tab-content'- 
«div class-"tab-pane active" id-"home"»...«/div» 


«script» 
$(function () { 
$('4myTab a:last').tab('show') 
3) 


«/script» 


ee 


实例 


下 面 的 实例 演示 了 标签 页 (Tab) 插件 方法 .tab 的 用 法 。 在 本 实例 中 ， 第 二 个 标签 
页 /OS 是 激活 的 : 





<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 标签 页 (Tab) 插件 方法 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


«ul id="myTab" class="nav nav-tabs"> 
<li class="active"><a href="#home" data-toggle="tab"> 
W3Cschool Home</a> 
</li> 
<li><a href="#ios" data-toggle="tab">i0S</a></li> 
<li class="dropdown"> 
«a href="#" id="myTabDrop1" class="dropdown-toggle" 


data-toggle-"dropdown"»Java «b class-'caret'»«/b» 
</a> 
«ul class="dropdown-menu" role="menu" aria-labelledby="myTabli 
<li><a href="#jmeter" tabindex="-1" data-toggle="tab"> 
jmeter</a> 
</li> 
<li><a href="#ejb" tabindex="-1" data-toggle="tab"> 
ejb</a> 
</1i> 
</ul> 
</li> 
</ul> 
<div id="myTabContent" class="tab-content"> 
<div class="tab-pane fade in active" id="home"> 
<p>W3Cschoool¥% & AiE T be Eis webi Riia, Ai A ek T E 
</div> 
<div class="tab-pane fade" id="ios"> 
«p»iOS 是 一 个 由 茶 果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 年 首次 2 
TV, iOS 派生 自 OS X， 它 们 共享 Darwin 基础 。0S X 操作 系统 是 用 在 茶 果 电 
«/div» 
«div class-"tab-pane fade" id="jmeter"> 
«p»jMeter 是 一 款 开 源 的 测试 软件 。 它 是 100% 4 Java 应 用 程序 ， 用 于 负载 
«/div» 
«div class-"tab-pane fade" id="ejb"> 
«p»Enterprise Java Beans (EJB) 是 一 个 创建 高 度 可 扩展 性 和 强大 企业 级 应 
«/p» 
«/div» 
«/div» 
«script» 
$(function () { 
$('ZmyTab li:eq(1) a').tab('show'); 
3); 


«/script» 


«/body» 
«/html» 





结果 如 下 所 示 : 


W3Cschool Home iOS Java ~v 


IOS 是 一 个 由 苹果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 FERAT iPhone, iPod Touch 
和 Apple TV. iOS 派生 自 OS X， 它 们 共享 Darwin 基础 。OS X 操作 系统 是 用 在 苹果 电脑 上 ，iOS EH 


果 的 移动 版 本 。 


事件 


下 表 列 出 了 标签 页 (Tab) 插件 中 要 用 到 的 事件 。 这 些 事件 可 在 函数 中 当 钧 子 使 


o 


事件 描述 


该 事件 在 标签 页 显示 
时 触发 ， 但 是 必须 在 
新 标签 页 被 显示 之 
前 。 分 别 使 用 
show.bs.tab event.target 和 $('a[data-toggle-"tab"]').on('sh 
event.relatedTarget 
来 定位 到 激活 的 标签 
页 和 前 一 个 激活 的 标 
签 页 。 


该 事件 在 标签 页 显示 

时 触发 ， 但 是 必须 在 

某 个 标签 页 已 经 显示 

之 后 。 分 别 使 用 

shown.bs.tab event.target 和 $('a[data-toggle-"tab"]').on('sh 

event.relatedTarget 

来 定位 到 激活 的 标签 

页 和 前 一 个 激活 的 标 

签 页 。 


实例 


下 面 的 实例 演示 了 标签 页 (Tab) 插件 事件 的 用 法 。 在 本 实例 中 ， 将 显示 当前 和 前 
一 个 访问 过 的 标签 页 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 标签 页 (Tab) 插件 事件 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«hr» 

«p class="active-tab"><strong> 激 活 的 标签 页 </strong> : «span»«/span- 

<p class="previous-tab"><strong> 前 一 个 激活 的 标签 页 </strong> : <span> 
<hr> 
«ul id-"myTab" class="nav nav-tabs"> 

«li class="active"><a href="#home" data-toggle="tab"> 

W3Cschool Home</a></1i> 
<li><a href="#ios" data-toggle="tab">i0S</a></1i> 
«li class="dropdown"> 


«a href="#" id-'"myTabDropi" class-'dropdown-toggle" 
data-toggle-"dropdown'» 

Java «b class-'caret"»«/b»«/a» 

«ul class-"dropdown-menu" role-z"menu" aria-labelledby-"myTabl 
<li><a href="#jmeter" tabindex-"-1" data-toggle-"tab"»jmet 
<li><a href="#ejb" tabindex-"-1" data-toggle-"tab"»ejb«/a: 

</ul> 

</li> 
</ul> 
<div id="myTabContent" class="tab-content"> 
<div class="tab-pane fade in active" id="home"> 
<p>W3Cschoool 菜 乌 教 程 是 一 个 提供 最 新 的 web 技 术 站 点 ， 本 站 免费 提供 了 建站 样 
</div> 
«div class="tab-pane fade" id="ios"> 
«p»iOS 是 一 个 由 茶 果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 年 首次 2 
TV, iOS 派生 自 OS X， 它 们 共享 Darwin 基础 。0S X 操作 系统 是 用 在 茶 果 电 
«/div» 
«div class-"tab-pane fade" id="jmeter"> 
«p»jMeter 是 一 款 开源 的 测试 软件 。 它 是 1009 ż Java 应 用 程序 ， 用 于 负载 
«/div» 
«div class-"tab-pane fade" id="ejb"> 

«p»Enterprise Java Beans (EJB) 是 一 个 创建 高 度 可 扩展 性 和 强大 企业 级 应 . 

</p> 

</div> 

</div> 

<script> 
$(function(){ 

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 

// 获取 已 激活 的 标签 页 的 名 称 

var activeTab = $(e.target).text(); 

// 获取 前 一 个 激活 的 标签 页 的 名 称 

var previousTab = $(e.relatedTarget).text(); 

$(".active-tab span").html(activeTab); 

$(".previous-tab span").html(previousTab); 


2r 
3); 


«/script» 


«/body» 
«/html» 


JM 
结果 如 下 所 示 : 





W3School Bootstrap 教程 


激活 的 标签 页 : iOS 
前 一 个 激活 的 标签 页 : W3Cschool Home 


W3Cschool Home ios Java v 


iOS 是 一 个 由 苹果 公司 开发 和 发 布 的 手机 操作 系统 。 最 初 是 于 2007 FEA iPhone, iPod Touch 


和 Apple TV. iOS 派生 自 OS X， 它 们 共享 Darwin 基础 。OSX 操 作 系统 是 用 在 苹果 电脑 上 ，iOS 是 苹 
果 的 移动 版 本 。 
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Bootstrap 工具 提示 (Tooltip) 插件 


当 您 想 要 描述 一 个 链接 的 时 候 ， 工 具 提 示 (Tooltip) 就 显得 非常 有 用 。 工 具 提 示 
(Tooltip) 插件 是 受 Jason Frame 写 的 jQuery.tipsy 的 和 启发。 工具 提示 (Tooltip) 
插件 做 了 很 多 改进 ， 例 如 不 需要 依赖 图 像 ， 而 是 改 用 CSS 实现 动画 效果 ， 用 data 
属性 存储 标题 信息 。 
如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 tooltip.js。 或 者 ， 正 如 
Bootstrap 插件 概 洛 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap.js 或 正 缩 版 的 
bootstrap.min.js., 


用 法 


工具 提示 (Tooltip) 插件 根据 需求 生成 内 容 和 标记 ， 上 默认 情况 下 是 把 工具 提示 
(tooltip) 放 在 它们 的 触发 元 素 后 面 。 您 可 以 有 以 下 两 种 方式 添加 工具 提示 
(tooltip) 


e 通过 data 属性 : 如 需 添加 一 个 工具 提示 (tooltip) , REE 一 个 锚 标 签 添加 
data-toggle-"tooltip" 即 可 。 锚 的 tite 即 为 工具 提示 (tooltip 的 文本 。 默 认 
情况 下 ， 插 件 把 工具 提示 (tooltip) 设置 在 顶部 。 


&lt;a href="#" data-toggle-"tooltip" title-"Example tooltip"&gt 
Ei — ķ 


。 通过 JavaScript : 通过 JavaScript 触发 工具 提示 (tooltip) 





$('4identifier').tooltip(options) 


工具 提示 (Tooltip) 插件 不 像 之 前 所 讨论 的 下 拉 菜 单 及 其 他 插件 那样 ， 它 不 
是 纯 CSS 插件 。 如 需 使 用 该 插件 ， 您 必须 使 用 jquery 激活 它 ( 读 取 
javascript) 。 使 用 下 面 的 脚本 来 启用 页 面 中 的 所 有 的 工具 提示 (tooltip) 


$(function () ( $("[data-toggle-'tooltip']").tooltip(); )); 


实例 
下 面 的 实例 演示 了 通过 data 属性 使 用 工具 提示 (Tooltip) 插件 的 用 法 。 


«IDOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 工具 提示 (Tooltip) 插件 </title> 


«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js'»«/script» 

«/head» 

«body» 


<h4> 工 具 提 示 (Tooltip) 插件 - 锚 </h4> 

这 是 一 个 «a hrefz"4" class-"tooltip-test" data-toggle-"tooltip" 
tit1le=" 默 认 的 Tooltip"> 
默认 的 Tooltip 

</a>. 

这 是 一 个 «a href="#" class="tooltip-test" data-toggle="tooltip" 
data-placement="left" title=" 左 侧 的 Tooltip"» 
左 侧 的 Tooltip 

</a>. 

这 是 一 个 <a href="#" data-toggle-"tooltip" data-placement="top" 
tit1e=" 顶 部 的 Tooltip"> 
顶部 的 Tooltip 

</a>. 

这 是 一 个 «a href="#" data-toggle-"tooltip" data-placement="bottom" 
title=" 底 部 的 Tooltip"» 
底部 的 Tooltip 

</a>. 

这 是 一 个 «a href="#" data-toggle="tooltip" data-placement="right" 
title=" 右 侧 的 Tooltip"> 
右 侧 的 Tooltip 

</a> 


<br> 


<h4> 工 具 提 示 (Tooltip) 插件 - 按钮 </h4> 

«button type="button" class="btn btn-default" data-toggle-"tooltip' 
tit1le=" 默 认 的 Tooltip"» 
默认 的 Tooltip 

</button> 

«button type="button" class="btn btn-default" data-toggle-"tooltip' 
data-placement-"left" title=" 左 侧 的 Tooltip"» 
左 侧 的 Tooltip 

</button> 

«button type="button" class="btn btn-default" data-toggle-"tooltip' 
data-placement-"top" title=" 顶 部 的 Tooltip" 
顶部 的 Tooltip 

«/button» 

«button type="button" class="btn btn-default" data-toggle-"tooltip' 
data-placement-"bottom" title=" 底 部 的 Tooltip" 
底部 的 Tooltip 

</button> 

«button type="button" class="btn btn-default" data-toggle-"tooltip' 
data-placement-"right" tit1le=" 右 侧 的 Tooltip"» 
右 侧 的 Tooltip 

«/button» 

«script» 
$(function () { $("[data-toggle-'tooltip']").tooltip(); 3); 


«/script» 


«/body» 
«/html» 


abo E 
结果 如 下 所 示 : 


TREND ue 
这 是 一 个 默认 的 Tooltip . 这 是 一 个 左 侧 的 Tooltip . 这 是 一 个 顶部 的 Tooltip . 这 是 一 个 底部 的 Tooltip . 这 是 一 个 右 侧 的 Tooltip 
工具 提示 (Tooltip ) 插件 - 按钮 


SAAI Tooltip ^ 左 侧 的 Tooltip ”顶部 的 Tooltip — 底部 的 Tooltip 右 侧 的 Tooltip 


选项 


有 一 些 选项 是 通过 Bootstrap 数据 API (Bootstrap Data API) 添加 或 通过 
JavaScript 调用 的 。 下 表 列 出 了 这 些 选项 : 


选项 名 称 


animation 


html 


placement 


selector 


title 


trigger 


content 


delay 


container 


方法 


类 型 /默认 值 


boolean 默认 
值 : true 


boolean 默认 
值 : false 


string|function 
默认 值 : top 


string 默认 
值 : false 


string | 
function 默认 
值 :" 


string 默认 
fà : hover 
focus' 


string | 
function 默认 
值 :" 


number | 
object 默认 
值 :0 


string | false 
默认 值 : false 


Data 属性 
名 称 


data- 
animation 


data-html 


data- 
placement 


data- 
selector 


data-title 


data- 
trigger 


data- 
content 


data- 
delay 


data- 
container 


TX 


iE 


工具 提示 使 用 CSS 渐变 滤 镜 效果 。 


向 工具 提示 插入 HTML。 如 果 为 fals 
jQuery 的 text 方法 将 被 用 于 向 dom 
容 。 如 果 您 担心 XSS 攻击 ， 请 使 用 


规定 如 何 定位 工具 提示 (BD 
top|bottom|left|rightļjauto) 。 当 指定 
时 ， 会 动态 调整 工具 提示 。 例 如 ， 妇 
placement 是 "auto left", TREHET’ 
可 能 显示 在 左边 ， 在 情况 不 允许 的 悍 
才 会 显示 在 右边 。 


如 果 提 供 了 一 个 选择 器 ， 工 具 提 未 
委派 到 指定 的 目标 。 


如 果 未 指定 title 属性 ， 则 title zb sm 
的 title 值 。 


定义 如 何 触发 工具 提示 : click| hov 
focus | manual。 您 可 以 传递 多 个 角 
每 个 触发 器 之 间 用 空格 分 隔 。 


如 果 未 指定 data-content Elt, |f 
认 的 content 值 。 


延迟 显示 和 隐藏 工具 提示 的 毫秒 数 - 
manual 手动 触发 类 型 不 适用 。 如 果 : 
是 一 个 数字 ， 那 么 延迟 将 会 应 用 于 显 
藏 。 如 果 提 供 的 是 对 象 ， 结 构 如 下 表 
人 不: delay:{ show: 500, hide: 


向 指定 元 素 追 加 工具 提示 。 实 例 : 
container: 'body' 


下 面 是 一 些 工具 提示 (Tooltip) 插件 中 有 用 的 方法 : 


方法 描述 实例 


HART $().tooltip(options) 

MENS Sdn d $('£element').tooltip('toggle') 
Pe an $('£element').tooltip('show') 
Quum em $('Zelement').tooltip('hide') 
phi PUR RARI $('Zelement').tooltip('destroy') 
实例 


下 面 的 实例 演示 了 工具 提示 (Tooltip 插件 方法 的 用 法 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 工具 提示 (Tooltip) 插件 方法 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script src-z"/scripts/jquery.min.js"»«/script» 
«script src-z"/bootstrap/js/bootstrap.min.js'"»«/script» 
</head> 
<body> 


<div style="padding: 100px 100px 10px; "> 
这 是 一 个 «a href="#" class="tooltip-show" data-toggle-"tooltip" 
title="show">Tooltip 方法 show 
</a>. 


这 是 一 个 «a href="#" class="tooltip-hide" data-toggle="tooltip" 
data-placement="left" title="hide">Tooltip 方法 hide 
</a>. 


这 是 一 个 «a href="#" class="tooltip-destroy" data-toggle-"tooltip 
data-placement="top" title="destroy">Tooltip 方法 destroy 
</a>. 


这 是 一 个 «a href="#" class="tooltip-toggle" data-toggle="tooltip" 
data-placement="bottom" title="toggle">Tooltip 方法 toggle 
</a>. 
<br><br><br><br><br><br> 
<p class="tooltip-options" > 
这 是 一 个 «a href="#" data-toggle-"tooltip" title="<h2>'am Head 
</h2>">Tooltip 方法 options 
</a>. 
</p> 


<script> 
$(function 
$(function 


() { $('.tooltip-show').tooltip('show');}); 
() { $( 
$(function () { $( 
() t $( 
O { $( 


' . tooltip-hide').tooltip('hide');)); 

'. tooltip-destroy').tooltip('destroy');3); 
' , tooltip-toggle').tooltip('toggle');3); 
".tooltip-options a").tooltip((html : true 


$(function 
$(function 


DE 
</script> 
<div> 


</body> 
</html> 


i 
结果 如 下 所 示 : 





这 是 一 个 Tooltip 方法 show . 这 是 一 个 Tooltip 方法 hide . 这 是 一 个 Tooltip 方法 destroy . 这 是 一 个 Tooltip 方法 toggle . 


'am Header2 


这 是 一 个 Tooltip 方法 options . 





事件 


E Temm (Tooltip) 插件 中 要 用 到 的 事件 。 这 些 事件 可 在 画 数 中 当 钩 子 
用 。 


事件 描述 


当 调 用 
Show 
实例 方 

show.bs.tooltip 法 时 立 
即 触发 
该 事 
件 。 


NIB 
提示 对 
用 户 可 
见 时 触 
发 该 事 
shown.bs.tooltip — fF (将 
SER 
CSS 


HX) . 


实例 方 

hide.bs.tooltip 法 时 立 
即 触发 
该 事 
件 。 


当 工 具 
提示 对 
HPR 
藏 时 触 
发 该 事 
hidden.bs.tooltip — fF (将 
SERE 


实例 


$('&myTooltip'). 


$('smyTooltip'). 


$('&myTooltip'). 


$('smyTooltip'). 


实例 


on('show.bs.tooltip', fun 


on('shown.bs.tooltip', fu 


on('hide.bs.tooltip', fun 


ont stvddensbsxtoo T td pos 


下 面 的 实例 演示 了 工具 提示 (Tooltip 插件 事件 的 用 法 。 
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<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 工具 提示 (Tooltip) 插件 事件 </title> 
«link hrefz'"/bootstrap/css/bootstrap.min.css" rel-'stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<h4> 工 具 提示 (Tooltip) 插件 - 锚 </h4> 

这 是 一 个 «a hrefz"£" class-"tooltip-show" data-toggle-"tooltip" 
tit1le=" 默 认 的 Tooltip"> 上 默认 的 Tooltip 

</a>. 


<script> 

$(function () { $('.tooltip-show').tooltip('show');}); 

$(function () { $('.tooltip-show').on('show.bs.tooltip', function i| 
alert("Alert message on show"); 


3)1); 


</script> 


</body> 
</html> 


El zu E 
结果 如 下 所 示 : 





Alert message on show 
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Bootstrap 弹出 框 (Popover) 插件 


弹出 框 (Popover) 与 工具 提示 (Tooltip) 类 似 ， 提 供 了 一 个 扩展 的 视图 。 如 需 激 
活 弹 出 框 ， 用 户 只 需 把 鼠标 基 停 在 元 素 上 即 可 。 漳 出 框 的 内 容 完全 可 使 用 
Bootstrap 数据 API (Bootstrap Data API) 来 填充 。 该 方法 依赖 于 工具 提示 
(tooltip) 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 popoverjs， 它 依赖 于 工具 
提示 (Tooltip) 插件 。 或 者 ， 正 如 Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 
bootstrap.js 或 压缩 版 的 bootstrap.min.js。 


用 法 


弹出 框 (Popover) 插件 根据 需求 生成 内 容 和 标记 ， 默 认 情 况 下 是 把 弹出 框 
usd EE R 
popover 


e 通过 data 属性 : 如 需 添加 一 个 弹出 框 (popover) ， 只 需 向 一 个 锚 / 按 钮 标签 
添加 data-toggle="popover" 即 可 。 锚 的 title 即 为 弹出 框 (popover) 的 文 
本 。 默 认 情 况 下 ， 插 件 把 弹出 框 (popover) 设置 在 顶部 。 


&lt;a href="#" data-toggle-"popover" title-"Example popover"&gt 
Th EHE E TR 
&lt;/a&gt; 


LN, US LU 
通过 JavaScript : 通过 JavaScript 启用 弹出 框 (popover) 


$('4identifier').popover(options) 


弹出 框 (Popover) 仓 的 下 拉 菜 单 及 其 他 插件 那样 ， 它 不 是 纯 
CSS 插件 。 如 需 使 用 该 插件 ， 您 必须 使 用 jquery 激活 它 GzHXjavascript) 。 使 用 
TRUE Eum NS NLE (popover) : 


$(function () ( $("[data-toggle-'popover']").popover(); )); 


实例 
下 面 的 实例 演示 了 通过 data 属性 使 用 弹出 框 (Popover) 插件 的 用 法 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 弹出 框 (Popover) 插件 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script src-z"/bootstrap/js/bootstrap.min.js'"»«/script» 
</head> 
<body> 


<div class="container" style="padding: 100px 50px 10px;" > 

<button type="button" class="btn btn-default" title="Popover tii 
data-container="body" data-toggle="popover" data-placement-z": 
data-content=" 左 侧 的 Popover 中 的 一 些 内 容 "> 
左 侧 的 Popover 

«/button» 

«button type="button" class="btn btn-primary" title-"Popover til 
data-container-"body" data-toggle-"popover" data-placement-z'"! 
data-content=" 顶 部 的 Popover 中 的 一 些 内 容 "> 
顶部 的 Popover 

«/button» 

«button type="button" class="btn btn-success" title-"Popover til 
data-container-"body" data-toggle-"popover" data-placement-'Il 
data-content=" 底 部 的 Popover 中 的 一 些 内 容 "> 
底部 的 Popover 

«/button» 

«button type="button" class="btn btn-warning" title-"Popover til 
data-container-"body" data-toggle-"popover" data-placement-"i 
data-content=" 右 侧 的 Popover 中 的 一 些 内 容 "> 
右 侧 的 Popover 

</button> 

</div> 


<script>$(function () 
{ $("[data-toggle='popover']").popover(); 
}); 


</script> 
</div> 


</body> 
</html> 


Ej = E 
结果 如 下 所 示 : 





Popover title 


左 侧 的 Popover 中 的 一 些 内 容 


选项 


有 一 


Popovertitle 


顶部 的 Popover 中 的 一 些 内 容 


左 侧 的 Popover 底部 的 Popover 右 侧 的 Popover 


Popovertitle 


Popover title 


右 侧 的 Popover 中 的 一 些 内容 


底部 的 Popover 中 的 一 些 内 容 


JavaScript 调用 的 。 下 表 列 出 了 这 些 选项 : 


选项 名 称 


animation 


html 


placement 


selector 


title 


trigger 


delay 


container 


类 型 /默认 值 


boolean 默认 
fà : true 


boolean 默认 
fà : false 


string|function 
默认 值 : top 


string 默认 
值 : false 


string | 
function 默认 
值 ! "n 


string 默认 
fà : 'hover 
focus' 


number | 
object 默认 
值 :0 


string | false 
默认 值 : false 


Data 属性 
名 称 


data- 
animation 


data-html 


data- 
placement 


data- 
selector 


data-title 


data- 
trigger 


data- 
delay 


data- 
container 


些 选项 是 通过 Bootstrap 数据 API (Bootstrap Data API) 添加 或 通 


描述 


向 弹出 框 应 用 CSS 褪色 过 渡 效果 。 

向 弹出 框 插入 HTML。 如 果 为 false, 

的 text 方法 将 被 用 于 向 dom 
。 如 果 您 担心 XSS 攻击 ， 请 使 用 


规定 如 何 定 位 弹出 框 ( 即 
top|bottom|left|rightļjauto) 。 当 指定 


时 ， 会 动态 调整 弹出 框 。 例 如 ， i5 
placement Æ "auto left", 2€ HUE RE 
能 显示 在 左边 ， 在 情况 不 允许 的 情 次 
会 显示 在 右边 。 

如 果 提 供 了 一 个 选择 器 ， 弹 出 框 对 务 
派 到 指定 的 目标 。 

如 果 未 指定 title 属性 ， 则 title 选项 
的 title 值 。 

定义 如 何 触发 弹出 框 : click| hover 
focus | manual。 您 可 以 传递 多 个 角 
每 个 触发 器 之 间 用 空格 分 隔 。 


延迟 显示 和 隐藏 弹出 框 的 毫秒 数 - 
manual 手动 触发 类 型 不 适用 。 如 果 : 
是 一 个 数字 ， 那 么 延迟 将 会 应 用 于 显 
藏 。 如 果 提 供 的 是 对 象 ， 结 构 如 下 月 
4A: delay:{ show: 500, hide: 


向 指定 元 素 追 加 弹出 框 。 实 例 : 
'body' 


方法 


下 面 是 一 些 弹 出 框 (Popover) 插件 中 有 用 的 方法 : 


A 描述 实例 
"e 向 元 素 集合 
Spons 附加 弹出 框 。 $().popover (options) 


.popover(options) 句柄 


切换 显示 / 

Toggle: We ; : ; 
i ; 隐藏 元 素 的 $('#element').popover('toggle') 

.popover('toggle") m HE. 


Show: 显示 元 素 的 mem " S 
.popover('show") z% EHE, $('#element' ).popover('show' ) 
Hide: 隐藏 元 素 的 | mn 
" #element'). h 
.popover('hide') 弹出 框 。 $('#element').popover('hide') 
. 隐藏 并 销毁 
pe 元 素 的 弹出 $('#element').popover('destroy') 


.popover('destroy') 框 


实例 
下 面 的 实例 演示 了 漳 出 框 (Popover) 插件 的 方法 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 弹出 框 (Popover) 插件 方法 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src-z"/scripts/jquery.min.js'"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


«div class-"container" style-"padding: 100px 50px 10px;" » 

«button type="button" class="btn btn-default popover-show" 
title-"Popover title" data-container-"body" 
data-toggle-"popover" data-placement-z"left" 
data-content=" 左 侧 的 Popover 中 的 一 些 内 容 — show 方法 "> 
左 侧 的 Popover 

«/button» 

«button type="button" class="btn btn-primary popover-hide" 
title="Popover title" data-container="body" 
data-toggle="popover" data-placement="top" 
data-content=" 顶 部 的 Popover 中 的 一 些 内 容 一 hide 方法 "> 
顶部 的 Popover 


«/button» 

«button type="button" class="btn btn-success popover-destroy" 
title-"Popover title" data-container-"body" 
data-toggle-"popover" data-placement-"bottom" 
data-content=" 底 部 的 Popover 中 的 一 些 内 容 一 destroy 方法 "> 
底部 的 Popover 

«/button» 

«button type="button" class="btn btn-warning popover-toggle" 
title-"Popover title" data-container-"body" 
data-toggle-"popover" data-placement-"right" 
data-content=" 右 侧 的 Popover 中 的 一 些 内 容 一 toggle 方法 "> 
右 侧 的 Popover 

</button><br><br><br><br><br><br> 

<p class="popover-options"> 
«a href="#" type="button" class="btn btn-warning" title-'«h2: 

data-container="body" data-toggle="popover" data-content-' 
<h4>Popover 中 的 一 些 内 容 一 options 方法 </h4>"> 


Popover 
</a> 
</p> 
<script> 
$(function () { $('.popover-show').popover('show');}); 
$(function () { $('.popover-hide').popover('hide');}); 
$(function () { $('.popover-destroy').popover('destroy');}); 
$(function () { $('.popover-toggle').popover('toggle');}); 
$(function () { $(".popover-options a").popover({html : true : 
</script> 
</div> 
</body> 
</html> 


Aoo S 
结果 如 下 所 示 : 
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Popover title 


顶部 的 Popover 中 的 一 些 内 容 一 一 





hide 方法 
Popover 
左 侧 的 Popover “甘于 Np 者 Esso ze ev ETE id 

右 侧 的 
mm Popover 

| 中 的 一 

些 内 容 

Title — 


toggle 
Popover z 
| Popover | S 


Popover 中 的 一 些 内 容 一 一 
options 方法 








事件 


FRIJE T EHE (Popover) 插件 中 要 用 到 的 事件 。 这 些 事件 可 在 函数 中 当 匆 子 


o 
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事件 


show.bs.popover 


shown.bs.popover 


hide.bs.popover 


hidden.bs.popover 


实例 


描述 


当 调 用 
Show 
实例 方 
法 时 立 
即 触发 
该 事 
件 。 
当 弹 出 
框 对 用 
户 可 见 
时 触发 
该 事件 
(将 等 
fF 
CSS 


EX) s 


实例 方 
法 时 立 
即 触发 
该 事 
件 。 

当 工 具 
提示 对 
用 户 隐 
藏 时 触 


实例 


$('#mypopover').on('show.bs.popover', f 


$('Zmypopover').on('shown.bs.popover', 


$('4mypopover').on('hide.bs.popover', f 


$('Zmypopover').on('hidden.bs.popover', 


下 面 的 实例 演示 了 弹出 框 (Popover) 插件 的 事件 : 
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<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 弹出 框 (Popover) 插件 事件 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-'stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div clas="container" style="padding: 100px 50px 10px;" > 
<button type="button" class="btn btn-primary popover-show" 
title="Popover title" data-container="body" 
data-toggle="popover" 
data-content=" 左 侧 的 Popover 中 的 一 些 内 容 一 show 方法 "> 
左 侧 的 Popover 
</button> 


</div> 

<script> 
$(function () ( $('.popover-show').popover('show');}); 
$(function () ( $('.popover-show').on('shown.bs.popover', fur 
alert(" 当 显示 时 警告 消息 " ) ; 

DH; 

</script> 

</div> 


</body> 
</html> 


El m E: 
结果 如 下 所 示 : 
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Bootstrap € £4E (Alert) 插件 
ERE (Alert) 消息 大 多 是 用 来 想 终端 用 户 显示 诸如 警告 或 确认 消息 的 信息 。 使 用 
告 框 (Alert) 插件 ， 您 可 以 向 所 有 的 警 告 框 消息 添加 可 取消 (dismiss) 功能 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 alert.js。 或 者 ， 正 如 
Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.js。 


用 法 
您 可 以 有 以 下 两 种 方式 启用 警告 框 的 可 取消 (dismissal) 功能 : 


@ 通过 data 属性 : 通过 数据 API (Data API) 添加 可 取消 功能 ， 只 逢 要 向 关闭 
按钮 添加 data-dismiss="alert"， 就 会 自动 为 警告 框 添加 关闭 功能 。 


b Dna 


&lt;a class-"close" data-dismiss-"alert" href="#" aria-hiddenz" 
&times; 
&lt;/a&gt; 


[E [me ——————ÀÀÀ1 





e 通过 JavaScript : 通过 JavaScript 添加 可 取消 功能 


$(".alert").alert() 


实例 
下 面 的 实例 演 过 data 属性 使 用 警告 框 (Alert) 插件 的 用 法 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 警告 框 (Alert) 插件 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="alert alert-warning"> 
<a href="#" class="close" data-dismiss="alert"> 


&times; 
</a> 
«strong» ! </strong> 您 的 网 络 连接 有 问题 。 
</div> 
</body> 
«/html» 


结果 如 下 所 示 : 


警告 ! 您 的 网 络 连接 有 问题 。 


下 面 是 一 些 警 告 框 (Alert) 插件 中 有 用 的 方法 : 


方法 描述 实例 
ee 
.alert() 的 警告 框 都 带 $('#identifier').alert(); 
有 关闭 功能 。 
Close Method ”关闭 所 有 的 警 n ESSET ' Y. 
«lentis les 告 框 。 $('sidentifier').alert('close'); 


如 需 在 关闭 时 启用 动画 效果 ， 请 确保 添加 了 fade 和 .in class. 


实例 


下 面 的 实例 演示 了 .alert() 方法 的 用 法 : 


<!DOCTYPE html» 

«html» 

«head» 
«title»Bootstrap 实例 - 警告 框 (Alert) 插件 alert() 方法 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'- 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 

</head> 

<body> 


«h32€ EE (Alert) 插件 alert() 方法 </h3> 

«div id-"myAlert" class-"alert alert-success'-» 
«a hrefz"£Z" class-"close" data-dismiss-"alert'»&times;«/a» 
<strong> XI} ! </strong> 结 果 是 成 功 的 。 

</div> 

<div id="myAlert" class="alert alert-warning"> 
«a href="#" class="close" data-dismiss="alert">&times;</a> 
<strong> 警 告 ! </strong> 您 的 网 络 连接 有 问题 。 

</div> 


<script type="text/javascript"> 
$(function(){ 
$(".close").click(function(){ 
$("#myAlert").alert(); 
}); 
}); 


</script> 


</body> 
</html> 


ED -A 
下 面 的 实例 演示 了 .alert('close') 方法 的 用 法 : 


<!DOCTYPE html» 

«html» 

«head» 
«title»Bootstrap 实例 - 警告 框 (ALlert) 插件 alert('close') 方法 </ti 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'"» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js'"»«/script» 

</head> 

<body> 


<h3> 和 警告 框 (Alert) 插件 alert('close') 方法 </h3> 

«div id-"myAlert" class-"alert alert-success'-» 
«a hrefz"£Z" class-"close" data-dismiss-"alert'"»&times;«/a» 
<strong> RH} ! </strong> 结 果 是 成 功 的 。 

«/div» 

«div id-"myAlert" class-"alert alert-warning'"-» 
«a hrefz"£Z" class-"close" data-dismiss-"alert'"»&times;«/a» 
«strong» €& ! ! </strong> 您 的 网 络 连接 有 问题 。 

</div> 


<script type="text/javascript"> 
$(function(){ 
$(".close").click(function(){ 
$("#myAlert").alert('close'); 
}); 
}); 


</script> 


</body> 
</html> 





您 可 以 看 到 所 有 的 警告 框 都 应 用 了 关闭 功能 ， 即 关闭 任意 的 警告 框 ， 其 他 剩余 的 警 
告 框 也 会 被 关闭 。 


事件 
下 表 列 出 了 警告 框 (Alert) 插件 中 要 用 到 的 事件 。 这 些 事件 可 在 醒 数 中 当 约 子 使 


o 


事件 描述 实例 


当 调 用 
close 
实例 方 
close.bs.alert 法 时 立 $('#myalert').bind('close.bs.alert', functi 
即 触发 
该 事 
件 。 


框 被 关 
闭 时 触 
发 该 事 
closed.bs.alert 等 竺 $('#myalert').bind('closed.bs.alert', funct 


实例 


下 面 的 实例 演示 了 和 警告 框 (Alert) 插件 的 事件 : 


W3School Bootstrap 教程 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 警告 框 (ALert) 插件 事件 </title> 
«link hrefz'"/bootstrap/css/bootstrap.min.css" rel-'stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div id="myAlert" class="alert alert-success"> 
<a href="#" class="close" data-dismiss="alert">&times;</a> 
<strong> XI} ! </strong> 结 果 是 成 功 的 。 

«/div» 


«script type-z"text/javascript"» 
$(function()( 
$("4ZmyAlert").bind('closed.bs.alert', function () { 
alert(" 警 告 消息 框 被 关闭 。" ) ; 
3): 
3); 


</script> 


</body> 
</html> 


1 | 


结果 如 下 所 示 : 
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Bootstrap 1Z4z (Button) 插件 


按钮 (Button) 在 Bootstrap 按钮 一 章 中 介绍 过 。 通 过 按钮 (Button) 插件 ， 您 可 
以 添加 进 一 些 交互 ， 比 如 控制 按钮 状态 ， 或 者 为 其 他 组 件 〈 如 工具 栏 ) 创建 按钮 
组 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 button.js。 或 者 ， 正 如 
Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.js。 


加 载 状态 


如 需 向 按钮 添加 加 载 状态 ， 只 需要 简单 地 向 button 元 素 添加 data-loading- 
text="Loading..." 作为 其 属性 即 可 ， 如 下 面 实 例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 按钮 (Button) 插件 加 载 状态 </title> 
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


«button id="fat-btn" class="btn btn-primary" data-loading-text-"Lo: 
type="button"> 加 载 状 态 
</button> 
<script> 
$(function() { 
$(".btn").click(function(){ 
$(this).button('loading').delay(1000).queue(function() { 
// $(this).button('reset'); 
}); 
3); 
3); 


«/script» 


«/body» 
«/html» 


了 
结果 如 下 所 示 : 





单个 切换 


如 需 激活 单个 按钮 的 切换 ( 即 改变 按钮 的 正常 状态 为 按压 状态 ， 反 之 亦 然 ) ， 只 需 
向 button 元 素 添 加 data-toggle="button" 作为 其 属性 即 可 ， 如 下 面 实 例 所 示 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 按钮 (Button) 插件 单个 切换 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<button type="button" class="btn btn-primary" 
data-toggle="button"> 单个 切换 
«/button» 


«/body» 
«/html» 


:| 
结果 如 下 所 示 : 





复 选 框 (Checkbox) 


您 可 以 创建 复 选 框 组 ， 并 通过 向 btn-group 添加 data 属性 data- 
toggle="buttons" 来 添加 复 选 框 组 的 切换 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 按钮 (Button) 插件 复 选 框 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="btn-group" data-toggle="buttons"> 
<label class="btn btn-primary"> 
«input type="checkbox"> 选项 1 
</label> 
«label class="btn btn-primary"> 
<input type="checkbox"> 选项 2 
</label> 
«label class="btn btn-primary"> 
<input type="checkbox"> 选项 3 
</label> 
</div> 


</body> 
«/html» 


El -=A 
结果 如 下 所 示 : 


选项 1 ”选项 2 选项 3 





单 选 按钮 (Radio) 


类 似 地 ， 您 可 以 创建 单 选 按钮 组 ， 并 通过 向 btn-group 添加 data 属性 data- 
toggle="buttons" 来 添加 单 选 按钮 组 的 切换 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 按钮 (Button) 插件 单 选 按钮 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class="btn-group" data-toggle="buttons"> 
<label class="btn btn-primary"> 
<input type="radio" name="options" id="option1"> 选项 1 
</label> 
«label class="btn btn-primary"> 
«input type="radio" name-"options" id-"option2'» 选项 2 
«/label» 
«label class="btn btn-primary"- 
«input type="radio" name-"options" id-"option3'"» 选项 3 
«/ label» 
«/div» 


«/body» 
«/html» 


El | 
结果 如 下 所 示 : 


选项 1 选项 2 选项 3 





用 法 
您 可 以 通过 JavaScript 启用 按钮 (Button) 插件 ， 如 下 所 示 : 


$('.btn').button() 


方法 


下 面 是 一 些 按钮 (Button) 插件 中 有 用 的 方法 : 


方法 描述 实例 


2x oum 

激活 的 外 观 。 您 可 以 使 用 
data-toggle 属性 启用 按钮 人 
的 自动 切换 。 


当 加 载 时 ， 按 钮 是 禁用 的 ， 
且 文 本 变 为 button 元 素 的 
data-loading-text 属性 的 
值 。 


重 秆 按钮 状态 ， 文 本 内 容 恢 
复 为 最 初 的 内 容 。 当 您 想 | 
TA 1 ESO 
时 ， 该 方法 非常 有 用 。 


该 方法 中 的 字符 串 是 指 由 用 
户 声明 的 任何 字符 串 。 使 用 sy button(string) 


button('toggle") 
$().button('loading') 


.button('loading") 


.button('reset') 


.button(string) 该 方法 ， 重 冒 按钮 状态 ， 
添加 新 的 内 容 。 
实例 


下 面 的 实例 演示 了 上 面 方法 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 按钮 (Button) 插件 方法 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
«/head» 
«body» 


<h2> 点 击 每 个 按钮 查看 方法 效果 </h2> 
<h4> 演 示 .button('toggle') 方法 </h4> 
«div id-"myButtonsi" class="bs-example"> 
«button type="button" class="btn btn-primary"> 原 始 </button> 
«/div» 


<h4> 演 示 .button('loading') 方法 </h4> 
«div id-"myButtons2" class="bs-example"> 
«button type="button" class="btn btn-primary" 
data-loading-text="Loading. . ."> 原 始 
«/button» 
«/div» 


<h4> 演 示 .button('reset') 方法 </h4> 


«div id-"myButtons3" class="bs-example"> 
«button type="button" class="btn btn-primary" 
data-loading-text="Loading..."> 原 始 
</button> 
</div> 


<h4> 演 示 .button(string) 方法 </h4> 
«button type="button" class="btn btn-primary" id="myButton4" 

data-complete-text="Loading finished"> 请 点 击 我 
</button> 
<script type="text/javascript"> 

$(function () { 

$("#myButtons1 .btn").click(function(){ 

$(this).button('toggle'); 
3); 
3); 
$(function() { 

$("4myButtons2 .btn").click(function()( 
$(this).button('loading').delay(1000).queue(function() (1 
3); 
3); 


); 
$(function() { 
$("4ZmyButtons3 .btn").click(function()( 
$(this).button('loading').delay(1000).queue(function() { 
$(this).button('reset'); 
H; 
1); 
1); 
$(function() { 
$("4myButton4").click(function()( 
$(this).button('loading').delay(1000).queue(function() { 
$(this).button('complete'); 
3); 
1); 
1); 


«/script» 


«/body» 
«/html» 


Rb C IR 
结果 如 下 所 示 : 
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点 击 每 个 按钮 查看 方法 效果 
滨 示 .button(toggle') 方法 


bis 


演示 .button(lloading") 方法 


| E 
üt 


滨 示 .button(reset') 方法 


en 
üt 


滨 示 .button(string) 方法 
请 点 击 找 
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Bootstrap 1 & (Collapse) 插件 


if (Collapse) WFT ARE iir qu MKR eec. J00618 H'eoK ODEBNT de 
导航 还 是 内 容 面板 ， 它 都 允许 很 多 内 容 选项 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 collapse.js。 同 时 ， 也 
需要 在 您 的 Bootstrap 版 本 中 引用 Transition (过 渡 ) 插件 。 或 者 ， 正 如 
Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.js。 


您 可 以 使 用 折 受 (Collapse) 插件 : 
e 创建 可 折 县 的 分 组 或 折 且 面板 (accordion) ， 如 下 所 示 : 


&lt; DOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;title&gt;Bootstrap 实例 - dr émmWx&lt;/title&gt; 
&lt;link hrefz'"/bootstrap/css/bootstrap.min.css" rel="styles 
&lt;script srcz'"/scripts/jquery.min.js'"&gt;&lt;/script&gt; 
&lt;script srcz'"/bootstrap/js/bootstrap.min.js'&gt;&lt;/scri 
&lt;/head&gt; 
&lt;body&gt; 


&lt;div class-"panel-group" id-"accordion"&gt; 
&lt;div class="panel panel-default'&gt; 
&lt;div class-"panel-heading"'&gt; 
&lt;h4 class-"panel-title"&gt; 
&lt;a data-toggle-"collapse" data-parent-"Zaccordion" 
hrefz"ZzcollapseOne"&gt; 
点 击 我 进行 展开 ， 再 次 点 击 我 进行 折合 。 第 1 部 分 
&lt;/a&gt; 
&lt;/h4&gt; 
&lt;/div&gt; 
&lt;div id-"collapseOne" class-"panel-collapse collapse in" 
&lt;div class-"panel-body"&gt; 
Nihil anim keffiyeh helvetica, craft beer labore wes ar 
cred nesciunt sapiente ea proident. Ad vegan excepteur 
vice lomo. 
&lt;/div&gt; 
&lt;/div&gt; 
&lt;/div&gt; 
&lt;div class="panel panel-default"'&gt; 
&lt;div class-"panel-heading"&gt; 
&lt;h4 class-"panel-title"&gt; 
&lt;a data-toggle-"collapse" data-parent-"Zaccordion" 
hrefz"ZzcollapseTwo"&gt; 
点 击 我 进行 展开 ， 再 次 点 击 我 进行 折合 。 第 2 部 分 
&lt;/a&gt; 


&lt;/h4&gt; 
&lt;/div&gt; 
&lt;div id-"collapseTwo" class-"panel-collapse collapse"'&gt 
&lt;div class-"panel-body"&gt; 
Nihil anim keffiyeh helvetica, craft beer labore wes ar 
cred nesciunt sapiente ea proident. Ad vegan excepteur 
vice lomo. 
&lt;/div&gt; 
&lt;/div&gt; 
&lt;/div&gt; 
&lt;div class="panel panel-default"'&gt; 
&lt;div class-"panel-heading"&gt; 
&lt;h4 class-"panel-title"&gt; 
&lt;a data-toggle-"collapse" data-parent-"Zaccordion" 
hrefz"ZzcollapseThree"&gt; 
点 击 我 进行 展开 ， 再 次 点 击 我 进行 折合 。 第 3 部 分 
&lt;/a&gt; 
&lt;/h4&gt; 
&lt;/div&gt; 
&lt;div id-"collapseThree" class-"panel-collapse collapse"e 
&lt;div class-"panel-body"&gt; 
Nihil anim keffiyeh helvetica, craft beer labore wes ar 
cred nesciunt sapiente ea proident. Ad vegan excepteur 
vice lomo. 
&lt;/div&gt; 
&lt;/div&gt; 
&lt;/div&gt; 
&lt;/div&gt; 


&lt;/body&gt; 
&lt;/html&gt; 





结果 如 下 所 示 : 


点 击 我 进行 展开 ， 再 次 点 击 我 进行 折合 。 第 1 部 分 





Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea 
proident. Ad vegan excepteur butcher vice lomo 


点 击 我 进行 展开 ， 再 次 点 击 我 进行 折合 。 第 3 部 分 


1. data-toggle="collapse" 757121 2::28 32 Re JT eX 3j d BJ 28 EB t Rz Es 
2. href £k data-target 属性 添加 到 父 组 件 ， 它 的 值 是 子 组 件 的 id, 
3. data-parent 属性 把 折 咎 面板 (accordion) 的 id 添加 到 要 展开 或 折 生 的 组 
件 的 链接 上 。 
e 创建 不 带 accordion 4; i5 B3 i 3E Bg 3T 4 28fF (collapsible) ， 如 下 所 示 : 


&lt; DOCTYPE html&gt; 

&lt;html&gt; 

&lt;head&gt; 
&lt;title&gt;Bootstrap 实例 - 简单 的 可 折 受 组 件 &Lt;/title&gt; 
&lt;link hrefz'"/bootstrap/css/bootstrap.min.css" rel="styles 
&lt;script srcz'"/scripts/jquery.min.js'"&gt;&lt;/script&gt; 
&lt;script srcz'/bootstrap/js/bootstrap.min.js"&gt;&lt;/scri 

&lt;/head&gt; 

&lt;body&gt; 


&lt;button type="button" class="btn btn-primary" data-toggle-'c 
data-target="#demo"&gt; 
fj BIET d aA 

&lt;/button&gt; 


&lt;div id-"demo" class-"collapse in'&gt; 
Nihil anim keffiyeh helvetica, craft beer labore wes andersor 
cred nesciunt sapiente ea proident. Ad vegan excepteur butche 
vice lomo. 

&lt;/div&gt; 


&lt;/body&gt; 
&lt;/html&gt; 


Ei 





结果 如 下 所 示 : 


简单 的 可 折 人 组 件 





Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad 
vegan excepteur butcher vice lomo 


正如 您 在 实例 中 看 到 的 ， 我 们 创建 了 一 个 可 折 受 的 组 件 ， 与 折 受 面板 
(accordion) 不 同 ， 我 们 没有 添加 属性 data-parent。 


用 法 


FRIJHEIT (Collapse) 插件 用 于 处 理 繁重 的 伸缩 的 class : 


Class 描述 
.collapse 隐藏 内 容 。 
.collapse.in 显示 内 容 。 


.collapsing 当 过 渡 效 果 开 始 时 被 添加 ， 当 过 渡 效 果 完 成 时 被 移 除 。 
您 可 以 通过 以 下 两 种 方式 使 用 折 受 (Collapse) 插件 : 


e 通过 data 属性 : 向 元 素 添 加 data-toggle2"collapse" 和 data-target, Ez 
分 配 可 折 释 元 素 的 控制 。data-target 属性 接受 一 个 CSS 选择 器 ， 并 会 对 其 应 
用 折 重 效果 。 请 确保 向 可 折 生 元 素 添 加 class .collapse。 如 果 您 希望 它 默 认 情 
况 下 是 打开 的 ， 请 添加 额外 的 class .in。 


为 了 向 可 折 受 控件 添加 类 似 折 彼 面板 的 分 组 管理 ， 请 添加 data 属性 data- 
parentz"Zselector", 


e 通过 JavaScript : 可 通过 JavaScript 激活 collapse 方法 ， 如 下 所 示 : 


$('.collapse').collapse() 


有 一 些 选项 是 通过 data 属性 或 JavaScript 来 传递 的 。 下 表 列 出 了 这 些 选项 : 


Data 


选项 3e sU [EA E 
名 称 
selector 如 果 提 供 了 一 个 选择 器 ， 当 可 折 党 项 目 显示 时 ， 
parani 默认 data- ， 指 定 父 元 素 下 的 所 有 可 折 且 的 元 素 将 被 关闭 。 这 
fü: parent ”与 创 痛 的 折 受 面板 (accordion) 的 行为 类 似 - 
false 这 依赖 于 accordion-group X. 
boolean 
默认 data- ITE 
T t Je: E. 
toggle je OE Ji FH RTT & 7638. 
true 


方法 


Tta} (Colapse) 插件 中 有 用 的 方法 : 


方法 描述 实例 


Options: 素 。 接 "m "m 

ET dentif : 

.collapse(options) ， 受 一 个 S('sidentifier') 
可 选 的 


对 象 。 


collapse({ toggle: fal: 


Toggle: 


.collapse('toggle') 藏 可 折 $('#identifier').collapse('toggle') 


yı ål 


Show: 


38 S ko 
Bs 


o 


Hide: 


.collapse('hide") $('£identifier').collapse('hide') 


B 寻 
本 | 加 


实例 
下 面 的 实例 演示 了 方法 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - $r4& (Collapse) 插件 方法 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'"» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js"»«/script» 
</head> 
<body> 


<div class-"panel-group" id="accordion"> 
<div class="panel panel-default"> 
«div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseOne"> 
点 击 我 进行 展开 ， 再 次 点 击 我 进行 折 有 侣 。 第 1 部 分 - -hide 方法 
</a> 
</h4> 
</div> 
<div id-"collapseOne" class="panel-collapse collapse in"> 


«div class-"panel-body"- 
Nihil anim keffiyeh helvetica, craft beer labore wes al 
nesciunt sapiente ea proident. Ad vegan excepteur butcl 
lomo. 
</div> 
</div> 
</div> 
<div class="panel panel-success"> 
«div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseTwo"> 
点 击 我 进行 展开 ， 表 次 点 击 我 进行 折合 。 第 2 部 分 - -show 方法 
</a> 
</h4> 
</div> 
«div id-"collapseTwo" class="panel-collapse collapse"> 
<div class="panel-body"> 
Nihil anim keffiyeh helvetica, craft beer labore wes al 
nesciunt sapiente ea proident. Ad vegan excepteur butcl 
lomo. 
</div> 
</div> 
</div> 
<div class="panel panel-info"> 
<div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseThree"> 
AERHTRA, BEARGRGhdAStÓÉT$. S 3 部 分 - -toggle 方法 
</a> 
«/h4» 
«/div» 
«div id-"collapseThree" class-"panel-collapse collapse"> 
«div class-"panel-body"- 
Nihil anim keffiyeh helvetica, craft beer labore wes al 
nesciunt sapiente ea proident. Ad vegan excepteur butcl 
lomo. 
</div> 
</div> 
</div> 
<div class="panel panel-warning"> 
«div class="panel-heading"> 
<h4 class="panel-title"> 
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseFour"> 
AERHTRA, BAA t RATIA. 9B 4 部 分 - -options 方法 
</a> 
«/h4» 
«/div» 
«div id-"collapseFour" class-z"panel-collapse collapse"> 
«div class-"panel-body"» 
Nihil anim keffiyeh helvetica, craft beer labore wes al 


nesciunt sapiente ea proident. Ad vegan excepteur butcl 
lomo. 
«/div» 
«/div» 
«/div» 
«/div» 
«script type-"text/javascript'» 
$(function () ( $('4collapseFour').collapse(í( 
toggle: false 


$(function () ( $('4collapseTwo').collapse('show')]); 

$(function () ( $('£ZcollapseThree').collapse('toggle'))); 

$(function () ( $('4ZcollapseOne').collapse('hide'))]); 
«/script» 


«/body» 
«/html» 
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结果 如 下 所 示 : 
点 击 我 进行 展开 ， 表 次 点 击 我 进行 折合 。 第 1 部 分 --hide 方法 
态 击 我 进行 展开 ， 再 次 点 击 我 进行 折合 。 第 2 部 分 --Show 方法 


Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea 
proident. Ad vegan excepteur butcher vice lomo 


点 击 我 进行 展开 ， 再 次 点 击 我 进行 折 登 。 第 3 部 分 --toggle 方法 


Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea 
proident. Ad vegan excepteur butcher vice lomo 


点击 我 进行 展开 ， 再 次 点 击 我 进行 折合 。 第 4 部 分 -options 方法 


事件 


下 表 列 出 了 折 又 (Collapse) 插件 中 要 用 到 的 事件 。 这 些 事件 可 在 函数 中 当 匆 子 使 
用 。 


事件 


show.bs.collapse 


shown.bs.collapse 


hide.bs.collapse 


hidden.bs.collapse 


实例 


描述 


在 调用 
Show 

方法 后 
触发 该 
事件 。 

ume 
元 素 对 
用 户 可 
见 时 触 


CSS 


下 面 的 实例 演示 了 事件 的 用 法 : 


$( '#identifier ' ) . 


$( '#identifier ' ) . 


$( '#identifier ' ) . 


$( '#identifier ' ) . 


实 人 


on('show.bs.collapse', 


on('shown.bs.collapse' 


on('hide.bs.collapse', 


on('hidden.bs.collapse 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - fÆ (Collapse) 插件 事件 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script src-z"/bootstrap/js/bootstrap.min.js'"»«/script» 
</head> 
<body> 


«div class-"panel-group" id="accordion"> 
«div class="panel panel-info'"- 
«div class-z"panel-heading"» 
«h4 class-"panel-title"- 
«a data-toggle-"collapse" data-parent-"Zaccordion" 
hrefz"Zzcollapseexample"» 
点 击 我 进行 展开 ， 再 次 点 击 我 进行 折合 。- -Shown 事件 
</a> 
</h4> 
</div> 
<div id-"collapseexample" class="panel-collapse collapse"> 
<div class="panel-body"> 
Nihil anim keffiyeh helvetica, craft beer labore wes ar 
cred nesciunt sapiente ea proident. 
Ad vegan excepteur butcher vice lomo. 
</div> 
</div> 
</div> 
</div> 


<script type="text/javascript"> 
$(function () { 
$('#collapseexample').on('show.bs.collapse', function () { 
alert( ' 嘿 ， 当 您 展开 时 会 提示 本 警告 ' ) ; } ) 
3); 


«/script» 


«/body» 
«/html» 





结果 如 下 所 示 : 
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Bootstrap 轮 播 (Carousel) 插件 


Bootstrap 轮 播 (Carousel) 插件 是 一 种 灵活 的 响应 式 的 向 站 点 添加 滑 块 的 方式 。 
除 此 之 外 ， 内 容 也 是 足够 灵活 的 ， 可 以 是 图 像 、 内 馈 框 架 、 视 频 或 者 其 他 您 想 要 放 
置 的 任何 类 型 的 内 容 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 carouseljs。 或 者 ， 正 
如 Bootstrap 插件 概览 一 章 中 所 提 Fl, 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.js。 


实例 


下 面 是 一 个 简单 的 幻灯 片 ， 使 用 Bootstrap itf& (Carousel) 插件 显示 了 一 个 循环 
播放 元 素 的 通用 组 件 。 为 了 实现 轮 播 ，1 您 只 需要 添加 带 市 有 该 标记 的 代码 即 可 。 不 需 
要 使 用 data 属性 ， 只 需要 简单 的 基于 class 的 开发 即 可 。 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 简单 的 轮 播 (Carousel) 插件 </title> 
«link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script src="/scripts/jquery.min.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
</head> 
<body> 


«div id-"myCarousel" class="carousel slide"> 
<!-- 轮 播 (Carousel) 指标 --> 
«ol class="carousel-indicators"> 
«li data-target="#myCarousel" data-slide-to="0" class="activet 
«li data-target="#myCarousel" data-slide-to="1"></1i> 
«li data-target="#myCarousel" data-slide-to="2"></1i> 
</ol> 
<!-- &&fÉ (Carousel) AH --> 
«div class-"carousel-inner"» 
«div class-"item active'» 
«img srcz"img/slidei.png" alt-"First slide"> 
«/div» 
«div class-"item"» 
«img src-"img/slide2.png" alt-"Second slide"> 
«/div» 
«div class-"item"» 
«img src-"img/slide3.png" alt-"Third slide"> 
«/div» 
«/div» 
<!-- 轮 播 (Carousel) 导航 --» 
«a class-'"carousel-control left" href="#myCarousel" 
data-slide-"prev"»2&1saquo;«/a» 
«a class-"carousel-control right" hrefz'"ZmyCarousel" 
data-slide-"next'"»&rsaquo;«/a» 
«/div» 


«/body» 
«/html» 


4 
结果 如 下 所 示 : 
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可 选 的 标题 


您 可 以 通过 .item 内 的 .carousel-caption 元 素 向 幻灯 片 添加 标题 。 
放置 任何 可 选 的 HTML 即 可 ， 它 会 自动 对 齐 并 格式 化 。 下 面 的 实例 演示 了 
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<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 轮 播 (Carousel) 插件 的 标题 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script src-z"/bootstrap/js/bootstrap.min.js'»«/script» 
</head> 
<body> 


«div id-"myCarousel" class="carousel slide"> 
<!-- &&iÉ (Carousel) 指标 --> 
<ol class="carousel-indicators"> 
<li data-target="#myCarousel" data-slide-to="0" class="activet 
<li data-target="#myCarousel" data-slide-to="1"></li> 
<li data-target="#myCarousel" data-slide-to="2"></li> 
</ol> 
<!-- &&fÉ (Carousel) AH --> 
<div class="carousel-inner"> 
<div class="item active"> 
<img src="img/slide1.png" alt="First slide"> 
«div class="carousel-caption"> 标 题 1</div> 
</div> 
<div class="item"> 
<img src="img/slide2.png" alt="Second slide"> 
<div class="carousel-caption"> 标 题 2</div> 
</div> 
<div class="item"> 
<img src="img/slide3.png" alt="Third slide"> 
<div class="carousel-caption"> 标 题 3</div> 
</div> 
</div> 
<!-- 轮 播 (Carousel) 导航 --> 
«a class="carousel-control left" href="#myCarousel" 
data-slide="prev">&lsaquo;</a> 
«a class="carousel-control right" href="#myCarousel" 
data-slide="next">&rsaquo;</a> 
</div> 


</body> 
</html> 


[e c:— 
结果 如 下 所 示 : 
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用 法 


。 通过 data 属性 : 使 用 data 属性 可 以 很 容易 控制 轮 播 (Carousel) 的 位 置 。 
o 属性 data-slide 接受 关键 字 prev 或 next， 用 来 改变 幻灯 片 相 对 于 当前 位 
置 的 位 置 。 
o 使 用 data-slide-to 来 向 轮 播 床 底 一 个 原始 滑动 索引 ，data-slide-to="2" 
将 把 滑 块 移动 到 一 个 特定 的 索引 ， 索 引 从 0 开始 计数 。 
o data-ride="carousel" 属性 用 于 标记 轮 播 在 页 面 加 载 时 就 开始 动画 播放 。 
e 通过 JavaScript: 轮 播 (Carousel) 可 通过 JavaScript 手动 调用 ， 如 下 所 
人 小: 


$('.carousel').carousel() 


有 一 些 选项 是 通过 data 属性 或 JavaScript 来 传递 的 。 下 表 列 出 了 这 些 选项 
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s i Data 
选项 x IRA; 
选项 名 类 型 /默认 属性 名 


称 值 称 


number EX data- 


interval | 4 : 5000 | interval 
string 默认 data- 

rs [à : "hover" pause 
gy - 
Wap boolean 默 . data 


认 值 : true wrap 


方法 


学 


描 


自动 循环 每 个 项 目 之 间 延 迟 的 时 间 量 。 如 
RA false， 轮 播 将 不 会 自动 循环 。 

妃 标 进入 时 暂停 轮 播 循环 ， 妃 标 离 开 时 恢 
复 轮 播 循环 。 


下 面 是 一 些 轮 播 (Carousel) 插件 中 有 用 的 方法 : 


方法 描述 实例 


初始 化 
轮 播 为 
可 选 的 
.carousel(options) Rose $('4identifier').carousel(( interval: 2 
并 开始 
循环 项 
目 。 


从 左 到 
右 循环 
轮 播 项 
目 。 


停止 轮 
.carousel('pause") 播 循 环 $('£identifier')..carousel('pause') 
项 目 。 


循环 轮 

播 到 某 

个 特定 

的 帧 

.carousel(number) (从 0 $('&identifier').carousel(number) 

开始 计 

数 ， 与 

数组 类 

似 ) 。 


循环 轮 
播 到 上 
一 个 项 
目 。 

循环 轮 
播 到 下 
人 


目 。 


.carousel('cycle") $('4identifier').carousel('cycle') 


.carousel('prev") $('4identifier').carousel('prev') 


.carousel('next') $('4identifier').carousel('next') 


实例 
下 面 的 实例 演示 了 方法 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - i&f& (Carousel) 插件 方法 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'» 


«script srcz"/scripts/jquery.min.js'"»«/script» 

«script src-z"/bootstrap/js/bootstrap.min.js'»«/script» 
«/head» 
«body» 


«div id-"myCarousel" class="carousel slide"> 
«!-- 轮 播 (Carousel) 指标 --> 
«ol class-'carousel-indicators"» 
«li data-target-"ZmyCarousel" data-slide-to-"0" 
class-"active"»«/li-» 
«li data-target-"ZmyCarousel" data-slide-to-z"1"»«/li-» 
«li data-target-"ZmyCarousel" data-slide-to-z"2"»«/li» 
</ol> 
<!-- 轮 播 (Carousel) 项 目 --> 
<div class="carousel-inner"> 
<div class="item active"> 
«img src-"img/slidei.png" alt="First slide"> 
</div> 
<div class="item"> 
«img src="img/slide2.png" alt="Second slide"> 
</div> 
<div class="item"> 
«img src="img/slide3.png" alt-"Third slide"> 
</div> 
</div> 
«!-- 轮 播 (Carousel) 导航 --> 
«a class="carousel-control left" href="#myCarousel" 
data-slide="prev">&lsaquo;</a> 
<a class="carousel-control right" href="#myCarousel" 
data-slide="next">&rsaquo;</a> 
<!-- 控制 按钮 --> 
«div style-z"text-align:center;"» 
«input type-"button" class-"btn start-slide" value="Start"> 
«input type="button" class="btn pause-slide" value="Pause"> 
«input type="button" class="btn prev-slide" value-"Previous £ 
«input type="button" class="btn next-slide" value="Next Slid: 
«input type="button" class="btn slide-one" value-"Slide 1"> 
«input type="button" class="btn slide-two" value-"Slide 2"> 
«input type="button" class="btn slide-three" value-"Slide 3': 
«/div» 
«/div» 
«script» 
$(function()[ 
// 初始 化 轮 播 
$(".start-slide").click(function()( 
$("4myCarousel").carousel('cycle'); 
3); 
// 停止 轮 播 
$(".pause-slide").click(function()([ 
$("4myCarousel").carousel('pause'); 
3); 
// 循环 轮 播 到 上 一 个 项 目 
$(".prev-slide").click(function(){ 
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$("ZmyCarousel").carousel('prev'); 


3); 

// 循环 轮 播 到 下 一 个 项 目 

$(".next-slide").click(function()( 
$("ZmyCarousel").carousel('next'); 


3); 

// 循环 轮 播 到 某 个 特定 的 帧 

$(".slide-one").click(function(){ 
$("#myCarousel").carousel(0); 


1); 

$(".slide-two").click(function()( 
$("4ZmyCarousel").carousel(1); 

1); 

$(".slide-three").click(function()( 
$("4ZmyCarousel").carousel(2); 

p); 

3); 


</script> 


</body> 
</html> 


结果 如 下 所 示 : 








Start Pause Previous Slide Next Slide Slide 1 Slide 2 Slide 3 


事件 


下 表 列 出 了 轮 播 (Carousel) 插件 中 要 用 到 的 事件 。 这 些 事件 可 在 函数 中 当 钧 子 使 


o 
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事件 描述 实例 


slide.bs.carousel $('sidentifier').on('slide.bs.carousel', fi 


slid.bs.carousel $('Zidentifier').on('slid.bs.carousel', fur 


实例 


下 面 的 实例 演示 了 事件 的 用 法 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»Bootstrap 实例 - 轮 播 (Carousel) 插件 事件 </title> 
«link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet'"- 
«script srcz"/scripts/jquery.min.js"»«/script» 
«script srcz"/bootstrap/js/bootstrap.min.js'»«/script» 
</head> 
<body> 


«div id-"myCarousel" class="carousel slide"> 
<!-- 4%% (Carousel) 指标 --> 
«ol class="carousel-indicators"> 
<li data-target="#myCarousel" data-slide-to="0" 
class="active"></li> 
<li data-target="#myCarousel" data-slide-to="1"></li> 
<li data-target="#myCarousel" data-slide-to="2"></li> 
«/ol» 
<!-- &&fÉ (Carousel) AH --» 
«div class-"carousel-inner"- 
«div class-"item active'» 
«img src-z"img/slidei.png" alt-"First slide"> 
«/div» 
«div class="item"> 
«img src-"img/slide2.png" alt-"Second slide"> 
«/div» 
«div class-"item"» 
«img srcz"img/slide3.png" alt-"Third slide"- 
«/div» 
«/div» 
«!-- 轮 播 (Carousel) 导航 --> 
«a class-"carousel-control left" href="#myCarousel" 
data-slide-"prev"»2&1saquo;«/a» 
«a class-"carousel-control right" hrefz'"ZmyCarousel" 
data-slide-"next'"»&rsaquo;«/a» 
«/div» 
«script» 
$(function()[ 
$('ZmyCarousel').on('slide.bs.carousel', function () ( 
alert(" 当 调用 slide 实例 方法 时 立即 触发 该 事件 。" ) ; 
3); 
3); 


«/script» 


«/body» 
«/html» 


e 0000 0 rl 
结果 如 下 所 示 : 
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当 调用 slide 实例 方法 时 立即 触发 该 事件 。 
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Bootstrap 附加 导航 (Affix) 插件 


附加 导航 (Affix) 插件 允许 某 个 «div» 固定 在 页 面 的 某 个 位 置 。 您 也 可 以 在 打开 或 
关闭 使 用 该 插件 之 间 进 行 切换 。 一 个 常见 的 例子 是 社交 图 标 。 它 们 将 在 某 个 位 置 开 
ES 页 面 点 击 某 个 标记 ， 该 <div 会 锁定 在 某 个 位 置 ， 不 会 随 着 页 面 其 他 部 分 
一 起 滚动 。 


如 果 您 想 要 单独 引用 该 插件 的 功能 ， 那 么 您 需要 引用 affix.js。 或 者 ， 正 如 
Bootstrap 插件 概览 一 章 中 所 提 到 ， 您 可 以 引用 bootstrap.js 或 压缩 版 的 
bootstrap.min.js。 


用 法 
您 可 以 通过 data 属性 或 者 通过 JavaScript 来 使 用 附加 导航 (Affix) 插件 。 


e 通过 data 属性 : 如 需 向 元 素 添加 附加 导航 (Affix) 行为 ， 只 需要 向 需要 监听 
22cm data-spyz"affix" 即 可 。 请 使 用 偏 移 来 定义 何 时 切换 元 素 的 锁定 和 
动 。 


实例 
下 面 的 实例 演示 了 通过 data 属性 使 用 附加 导航 (Afb) 插件 的 用 法 : 


&lt; DOCTYPE html&gt; 

&lt;html&gt; 

&lt;head&gt; 

&lt;meta charset-z"UTF-8"&gt; 

&lt;title&gt;Bootstrap 附加 导航 (Affix) $&ft&lt;/title&gt; 

&lt; link hrefz"/bootstrap/css/bootstrap.min.css" rel-"stylesheet"&t 
&lt;script srcz'"/scripts/jquery.min.js'&gt;&lt;/script&gt; 
&lt;script srcz'"/bootstrap/js/bootstrap.min.js'"&gt;&lt;/script&gt; 


&lt; style type-'"text/css"'&gt; 

/* Custom Styles */ 

ul.nav-tabs{ 
width: 140px; 
margin-top: 20px; 
border-radius: 4px; 
border: 1px solid #ddd; 
box-shadow: © 1px 4px rgba(0, ©, 0, 0.067); 


ul.nav-tabs li{ 
margin: 0; 
border-top: 1px solid £Zddd; 


ul.nav-tabs li:first-child( 


border-top: none; 


ul.nav-tabs li a( 
margin: 0; 
padding: 8px 16px; 
border-radius: 0; 


ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover( 
color: Zfff; 
background: £Z0088cc; 
border: 1px solid 40088cc; 


ul.nav-tabs li:first-child at 
border-radius: 4px 4px O 0; 


ul.nav-tabs li:last-child a( 
border-radius: © © 4px 4px; 


ul.nav-tabs.affix{ 
top: 30px; /* Set the top position of pinned element */ 
} 


&lt;/style&gt; 
&lt;/head&gt; 
&lt;body data-spy="scroll" data-target="#myScrollspy"&gt; 
&lt;div class="container"&gt; 
&lt;div class="jumbotron"&gt; 
&lt;hi&gt;Bootstrap Affix&lt;/h1&gt; 
&lt;/div&gt; 
&lt;div class-'row"&gt; 
&lt;div class-'col-xs-3" id-z"myScrollspy"'&gt; 
&lt;ul class="nav nav-tabs nav-stacked" data-spy-"affi» 
&lt;li class-"active"&gt;&lt;a hrefz'Zsection-1"&gt 
&lt;li&gt;&lt;a href="#section-2"&dgt; 第 二 部 分 &lLt;/a& 
&lt;li&gt;&lt;a href="#section-3"&gt; 第 三 部 分 &1t;/ag 
&lt;li&gt;&lt;a href="#section-4"&gt; 第 四 部 分 &1lt;/aes 
&lt;li&gt;&lt;a href="#section-5"&gt; 第 五 部 分 &1t;/ag 
&lt;/ul&gt; 
&lt;/div&gt; 
&lt;div class-'col-xs-9"&gt; 
&lt;h2 id="section-1"&gt; 第 一 部 分 &1t;/h28&gt; 
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipi: 
&lt;p&gt;Vestibulum quis quam ut magna consequat faucil 
&lt;hr&gt; 
&lt;h2 id="section-2"&gt; 第 二 部 分 &lt;/h2&gt; 
&lt;p&gt;Nullam hendrerit justo non leo aliquet imperd: 
&lt;p&gt;Vestibulum consectetur scelerisque lacus, ac 1 
&lt;hr&gt; 
&lt;h2 id="section-3"&gt; 第 三 部 分 &1lt;/h2&gt; 
&lt;p&gt;Integer pulvinar leo id risus pellentesque ve: 
&lt;p&gt;Phasellus vitae suscipit justo. Mauris phareti 
&lt;p&gt;Quisque pharetra velit id velit iaculis pretii 
&lt;hr&gt; 
&lt;h2 id="section-4"&gt ;第 四 部 分 &lLt,;,/h2&gt， 


&lt;p&gt;Suspendisse a orci facilisis, dignissim tortoi 
&lt;p&gt;Vestibulum quis quam ut magna consequat faucil 
&lt;p&gt;Phasellus fermentum, neque sit amet sodales tt 
&lt;p&gt;Ut ut risus nisl. Fusce porttitor eros at magr 
&lt;hr&gt; 
&lt;h2 id="section-5"&gt; 第 五 部 分 &1lt;/h2&gt; 
&lt;p&gt;Nam eget purus nec est consectetur vehicula. i 
&lt;p&gt;Vivamus mattis accumsan erat, vel convallis r: 
&lt;p&gt;Suspendisse a orci facilisis, dignissim tortoi 
&lt;p&gt;Morbi sed fermentum ipsum. Morbi a orci vulput 
&lt;p&gt;Sed vitae lobortis diam, id molestie magna. A: 
&lt;/div&gt; 
&lt;/div&gt; 

&lt;/div&gt; 

&lt;/body&gt; 

&lt;/html&gt; 


so m 
结果 如 下 所 示 : 





Bootstrap Affix 


第 一 部 分 





第 二 部 分 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem 
tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis 
第 三 部 分 vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum 
scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In 
第 四 部 分 tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in 
aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at 
第 五 部 分 bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id 


interdum neque porttitor. Integer faucibus ligula 


e 通过 JavaScript : 您 可 以 通过 JavaScript 手动 为 某 个 元 素 添加 附加 导航 
(Affix) ， 如 下 所 示 : 


$('ZmyAffix').affix(( 
offset: ( 
top: 100, bottom: function () (1 
return (this.bottom - 
$('.bs-footer').outerHeight(true)) 


} 
}) 


实例 
下 面 的 实例 演示 了 通过 JavaScript 使 用 附加 导航 (Affix) 插件 的 用 法 : 


&lt; IDOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;meta charset-z"UTF-8"&gt; 
&lt;title&gt;Bootstrap 附加 导航 (Affix) $&ft&lt;/title&gt; 
&lt;link hrefz'"/bootstrap/css/bootstrap.min.css" rel-"stylesheet"& 
&lt;script src-z"/scripts/jquery.min.js"&gt;&lt;/script&gt; 
&lt;script srcz"/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt; 
&lt;style type-"text/css"&gt; 
/* Custom Styles */ 
ul.nav-tabsíi 
width: 140px; 
margin-top: 20px; 
border-radius: 4px; 
border: 1px solid #ddd; 
box-shadow: © 1px 4px rgba(0, ©, ©, 0.067); 


ul.nav-tabs li( 
margin: 0; 
border-top: 1px solid #ddd; 


ul.nav-tabs li:first-child( 
border-top: none; 


ul.nav-tabs li a( 
margin: 0; 
padding: 8px 16px; 
border-radius: 0; 


ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover( 
color: #fff; 
background: £Z0088cc; 
border: 1px solid 4Z0088cc; 


ul.nav-tabs li:first-child at 
border-radius: 4px 4px O 0; 


ul.nav-tabs li:last-child a( 
border-radius: 0 9 4px 4px; 


ul.nav-tabs.affix( 
top: 30px; /* Set the top position of pinned element */ 


j 


&lt;/style&gt; 

&lt;script type-"text/javascript'&gt; 
$(document).ready(function()( 
$("4myNav").affix(( 

offset: ( 


T): 


3): 


j 


top: 125 


&lt;/script&gt; 

&lt;/head&gt; 

&lt;body data-spy-"scroll" data-target-"ZmyScrollspy"&gt; 
&lt;div class-"container"'&gt; 

&lt;div class-'jumbotron"&gt; 

&lt;hi&gt;Bootstrap Affix&lt;/h1&gt; 

&lt;/div&gt; 

&lt;div class-'row"&gt; 

&lt;div class-'col-xs-3" id-z"myScrollspy"&gt; 


&lt;ul class="nav nav-tabs nav-stacked" id-z'"myNav"&gt; 
&lt;li class-"active"&gt;&lt;a hrefz'Zsection-1"&gt 
&lt;li&gt;&lt;a href="#section-2"&dgt ;第 二 部 分 &lLt;/a& 
&lt;li&gt;&lt;a href="#section-3"&gt; 第 三 部 分 &1t;/ag 
&lt;li&gt;&lt;a href="#section-4"&gt ;第 四 部 分 &Lt;/ae& 
&lt;li&gt;&lt;a href="#section-5"&gt; 第 五 部 分 &1t;/ag 

&lt;/ul&gt; 


&lt;/div&gt; 
&lt;div class-'col-xs-9"&gt; 


&lt;h2 id="section-1"&gt; 第 一 部 分 &1lt;/h28&gt; 
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipi: 
&lt;p&gt;Vestibulum quis quam ut magna consequat faucil 
&lt;hr&gt; 

&lt;h2 id="section-2"&gt; 第 二 部 分 &lt;/h2&gt; 
&lt;p&gt;Nullam hendrerit justo non leo aliquet imperd: 
&lt;p&gt;Vestibulum consectetur scelerisque lacus, ac 1 
&lt;hr&gt; 

&lt;h2 id="section-3"&gt; 第 三 部 分 &1lt;/h2&gt， 
&lt;p&gt;Integer pulvinar leo id risus pellentesque ve: 
&lt;p&gt;Phasellus vitae suscipit justo. Mauris phareti 
&lt;p&gt;Quisque pharetra velit id velit iaculis pretii 
&lt;hr&gt; 

&lt;h2 id="section-4"&gt ;第 四 部 分 &lLt;/h2&gt， 
&lt;p&gt;Suspendisse a orci facilisis, dignissim torto! 
&lt;p&gt;Vestibulum quis quam ut magna consequat faucil 
&lt;p&gt;Phasellus fermentum, neque sit amet sodales tt: 
&lt;p&gt;Ut ut risus nisl. Fusce porttitor eros at magr 
&lt;hr&gt; 

&lt;h2 id-"section-5"&gt;:& hip j&lt;/h2&gt; 


&lt;p&gt;Nam eget purus nec est consectetur vehicula. 
&lt;p&gt;Vivamus mattis accumsan erat, vel convallis r: 
&lt;p&gt;Suspendisse a orci facilisis, dignissim tortoi 
&lt;p&gt;Morbi sed fermentum ipsum. Morbi a orci vulput 
&lt;p&gt;Sed vitae lobortis diam, id molestie magna. A: 
&lt;/div&gt; 
&lt;/div&gt; 

&lt;/div&gt; 

&lt;/body&gt; 

&lt;/html&gt; 


dp o m 
结果 如 下 所 示 : 
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第 二 部 分 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem 

tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis 
第 三 部 分 vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum 

scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In 
第 四 部 分 tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in 

aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at 
第 五 部 分 bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id 





interdum neque porttitor. Integer faucibus ligula 


通过 CSS 定位 


在 上 面 两 种 使 用 附加 导航 (Affix) 插件 的 方式 中 ， 您 都 必须 通过 CSS 定位 内 容 。 
附加 导航 (Affix) 插件 在 三 种 class 之 间 切 换 ， 每 种 class 都 呈现 了 特定 的 状态 : 
.affix、.affix-top 和 .affix-bottom。 请 按照 下 面 的 步骤 ， 来 为 这 三 种 状态 设置 您 自己 
的 CSS (不 依赖 此 插件 ) 。 


e 在 开始 时 ， 揪 件 添加 .affix-top 来 指示 元 素 在 它 的 最 顶端 位 置 。 这 个 时 候 不 需 
要 任何 的 CSS 定位 。 

e 当 滚动 经 过 添加 了 附加 导航 (Affix) 的 元 素 时 ， 应 触发 实际 的 附加 导航 
(Affix) 。 此 时 .affix 会 替代 .affix-top， 同 时 设置 position: fixed; (由 
Bootstrap 的 CSS 代码 提供 ) 。 

。 如 果 定 义 了 底部 偏 移 ， 当 滚动 到 达 该 位 置 时 ， 应 把 .affix 替换 为 affix- 
a d Roda DR E ie 则 要 求 同 时 设置 适当 的 
CSS。 在 这 种 情况 下 ， 请 在 必要 的 时 候 添加 position: absolute;。 


offset 


number 
| 
function 
| object 
默认 

值 : 10 


过 data 属性 或 JavaScript 来 传递 的 。 下 表 列 出 了 这 些 选项 


Data 
属性 
名 称 


data- 
offset 


描述 


当 计 算 滚 动 位 置 时 ， 距 离 项 部 的 偏 移 像素 。 如 果 
设置 了 一 个 数字 ， 则 该 偏 移 量 的 值 业 被 应 用 在 顶 
部 和 底部 。 如 果 设 置 了 一 个 对 象 偏 黎 ， 则 其 值 形 
如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 
}。 如 果 需 要 动态 计算 偏 移 ， 请 使 用 函数 。 


Bootstrap 其 它 
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Bootstrap UI 编辑 器 
以 下 是 15 款 最 好 的 Bootstrap 编辑 器 或 者 是 在 线 编辑 工具 。 


1. Bootstrap Magic 


这 是 一 个 Bootstrap 主题 生成 器 ， 使 用 最 新 的 Bootstrap 3 版 本 和 Angular JS 版 
本 ， 提 供 一 个 鲜 活 的 用 户 修改 预览 。 它 包括 了 各 种 各 样 的 导 人 ， 一 个 颜色 选择 器 和 
智能 的 预先 输入 。 更 神奇 的 是 ，Bootstrap 会 根据 用 户 的 每 个 选择 来 重新 简历 框 
架 ， 方 便 用 户 的 下 载 和 使 用 。 - 


Create professional website all by yourself 


Try it out 


30 days free trial - no oredit cand required 





2. BootSwatchr 
BootSwatchr 是 由 Drew Strickiand 独立 开发 和 维护 的 ， 是 唯一 支持 从 右 到 左 语言 


显示 的 Bootstrap 自 定义 构建 工具 ， 这 也 是 它 的 特色 之 一 。BootSwatchr 是 个 可 视 
化 的 工具 ， 可 以 从 底层 开始 创建 Bootstrap 主题 。 


BootSwatchr 
Themefoler for Twitter Bootstrar 







>x 
会 More Features 


a^guage discury. Tria feature is not nciuded in any version of 
Mary Paras b eras for davelopno a^d supporte Nha 


^d use ^^ 


à BootSwatchr? X How it Works 


Pe tame techeugue Dt mares sure t0 Dive you a preview of the Changes you mae, a4 y 


X Stay Informed 
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3. Bootstrap Live Editor 

Bootstrap Live Editor 是 个 所 见 即 所 得 的 构建 Bootstrap 的 编辑 器 。 在 Bootstrap 准 
备 好 的 内 容 和 代码 片段 的 基础 上 提供 一 个 又 好 又 优雅 的 方法 来 编辑 和 美化 htm, tE 
因此 它 是 个 明智 的 选择 。 除 此 之 外 ， 它 还 包括 高 级 的 选项 比如 按钮 配置 ， 自 定义 标 
签 和 为 用 户 做 最 明智 最 有 益 的 选择 。 


wrapjbootstrap Bootstrap Live Editor ove fs tame > 





Bootstrap Live Editor == B ü 


4. Fancy Boot 


Fancyboot 是 个 非常 有 用 的 Bootstrap 自 定义 工具 ， 人 允许 用 户 编辑 Bootstrap 的 配 

置 ， 自 动 预览 他 们 的 修改 结果 。 通 过 滑动 菜单 可 以 选择 需要 使 用 的 插件 和 组 件 。 当 
用 户 做 好 了 相应 的 修改 ， 可 以 下 载 一 个 包含 用 户 所 使 用 的 jQuery 插件 的 编译 好 的 

和 简化 后 的 CSS 文件 。 





Fancyboot 


5. Style Bootstrap 


Style Bootstrap 是 个 非常 棒 的 内 置 浏 览 器 的 GUI 实用 工具 ， 帮 助 用 户 自 定义 
Twitter Bootstrap 外 观 。 它 非常 容易 进行 自 定 义 操作 。 从 body 风格 ， 字 体 排版 ， 
按钮 ， 导 航 ， 格 式 ， 通 知 提示 和 其 他 用 户 很 容易 根据 自己 的 意愿 自 定义 的 元 素 。 除 
了 强大 的 自 定义 功能 ， 它 还 可 以 很 容易 生成 可 下 载 的 CSS 文件 。 
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Style Bootstrap 是 个 非常 棒 的 内 置 浏 览 器 的 GUI 实用 工具 ， 帮 助 用 户 自 定义 
Twitter Bootstrap 外 观 。 它 非常 容易 进行 自 定义 操作 。 从 body 风格 ， 字 体 排版 ， 
按钮 ， 导 航 ， 格 式 ， 通 知 提示 和 其 他 用 户 很 容易 根据 自己 的 意愿 自 定义 的 元 素 。 除 
了 强大 的 自 定义 功能 ， 它 还 可 以 很 容易 生成 可 下 载 的 CSS 文件 。 


Buttons 
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6. Lavish 


Lavish 是 个 帮助 用 户 从 一 个 图 像 中 定制 自己 喜欢 的 Bootstrap 配色 方案 。 用 户 可 以 
从 图 像 中 选择 各 种 颜色 用 在 body 背景 ， 链 接 ， 头 部 ， 菜 单 ， 标 签 ， 文 本 ， 下 拉 菜 
单 等 等 元 素 上 。 一 旦 你 确定 了 Bootstrap 配色 方案 ， 就 可 以 很 方便 的 下 载 相应 的 
Boostrap.css 文件 。 


Lavish Home 


Github Page Live Preview 





Step 1: Provide an image 





https //sphotos-a-sic xx fbodn net/hphotos-prn1/163026 481734701986 7179594 njpg 


NABABAT MAAGABB (874934 4677492 4676550 #332C2F 





Step 2: Customize everything 
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Bootstrap ThemeRoller 是 个 直观 的 web 应 用 程序 ， 提供 一 个 可 视 化 的 界面 让 用 户 
按照 自己 的 风格 创建 属于 自己 的 Bootstrap 主题 。 有 了 这 个 工具 ， 用 户 可 以 自 定义 
颜色 ， 大 小 ， 字 体 ， 格 式 ， 表 ， 按 钮 ， 警 告 信 息 ， 导 航 条 ， 菜 单 等 等 元 素 。 这 个 应 
用 还 会 帮 用 户 创建 的 每 种 风格 都 生成 唯一 的 一 个 URL ， 这 样 就 可 以 保存 用 户 所 有 
的 设置 。 更 不 可 思议 的 是 ， 当 用 户 离开 的 时 候 ， 用 户 可 以 停止 或 者 恢复 自己 定制 的 
EO 


Bootstrap ThemeRoller 


A handy and intuitive application that provides a visual interface to customize 
your favorite Bootstrap from Twitter. 


Start rolling your Bootstrap theme 


gre n 
页 面 。 


8. Layoutlt! 


Layoutlt ! 拥有 拖 搜 接口 的 功能 ， 能 简单 迅速 的 构建 一 个 Bootstrap 前 端 代码 。 
Layoutlt ! 兼容 任何 的 编程 语言 ， 人 允许 用 户 下 载 HTML ， 在 这 里 自由 的 进行 编码 设 


8? Layoutlt! . 


Create your frontend code simple and quickly with Bootstrap 
using our Drag & Drop Interface Builder. 


| Start Now! | Watch the iive demo © 


wW 





it o LE 


9. Pingendo 
Pingendo 是 个 可 视 化 的 桌面 应 用 程序 ， 人 允许 用 户 给 予 流行 的 Twitter Bootstrap HE 


架 创建 响应 式 web 页 面 原型 。Pingendo 还 提供 大 量 的 现成 的 布局 ， 拖 搜 元 素 的 位 
置 ， 调 整 大 小 和 自 定义 的 功能 。 用 户 可 以 自行 优化 他 们 的 页 面 ， 插 入 他 们 自己 的 内 
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Pingendo 
The simplest app to prototype with 





10. Kickstrap 


Kickstrap 是 个 Bootstrap Ul 编辑 器 ， 使 用 Firebase 作为 一 个 后 台 服 务 。 它 无 颖 的 
接合 了 Bootstrap 和 项 级 的 web 技术 。 更 厉害 的 是 ， 它 可 以 运行 一 个 已 验证 的 ， 不 
需要 本 地 后 台 支 持 ， 数 据 库 驱动 的 web 应 用 。 


HEP ox New Pie " - 








Integrated with Angular.js 


11. Bootply 


Bootply 是 一 款 很 棒 的 Bootstrap Ul 编辑 工具 ， 尽 可 能 简单 的 让 用 户 编辑 Bootstrap 
友好 的 CSS, HTML 和 Javascript 。 同 时 也 是 一 个 可 拖 搜 的 可 视 化 编辑 器 ， 用 来 
设计 ， 创 建 原型 和 测试 Bootstrap 框架 。Bootply 有 个 代码 存储 库 ， 里 面包 括 了 
Bootstrap 代码 片段 ， 示 例 和 模板 。 除 了 以 上 这 些 ， 更 吸引 人 的 是 它 有 个 非常 活跃 
的 Bootply 社区 ， 用 户 可 以 很 方便 的 发 现 ， 分 享 和 展示 相关 的 代码 和 片段 。 


Boopy ”ED nc 





12. X-editable 


X-Editable 是 一 个 扩展 库 ， 人 允许 用 户 创建 可 编辑 的 元 素 ， 上 比如 页 面 弹 出 和 内 联 模 
式 。 她 提供 本 地 的 Bootstrap, jQuery UI 或 者 是 纯 jQuery 编辑 功能 。 此 Bootstrap 
Ul 编辑 器 拥有 许多 很 强大 的 功能 ， 包 括 客户 端 ， 服 务 辣 验证， 支持 键盘 ，live 事 
件 ， 可 定制 的 容器 空间 等 等 。 总 而 言 之 ， 它 提供 非常 快速 的 开发 功能 ， 易 于 删除 字 
段 ， 一 个 用 来 更 新 数据 的 简 简 单 后 台 脚 本 。 

X-editable 


Bootstrap jQuery UI jQuery 


13. Jetstrap 


不 要 错误 的 以 为 Jetstrap 只 是 个 简单 的 实体 模型 工具 ， 它 是 100% 基于 web 接口 
的 Twitter Bootstrap 构建 工具 。 用 户 不 需要 下 载 任 何 类 型 的 软件 就 可 以 使 用 
Jetstrap。 用 户 只 需要 登录 ， 然 后 构建 自己 的 项 目 ， 就 可 以 随时 随地 进行 访问 了 。 


构建 功能 主要 是 提供 给 开发 者 和 设计 者 的 ， 用 户 很 容易 就 可 以 通过 Jetstrap 生成 漂 
亮 的 网 站 ， 而 且 运 行 速度 非常 快 





* jetstrap 


THE BOOTSTRAP 3 BUILDER 


Not just a mock-up tool, Jetstrap is the premier interface-building tool for Bootstrap 3, 


GET STARTED NOW 


» OR TRY THE DEMO 


14. 


DivShot 是 个 快速 的 ， 可 视 化 的 前 端 开 发 文本 编辑 器 ， 跟 工具 一 样 的 简单 
整洁 。 包 括 各 种 框架 需要 的 各 种 定制 的 组 件 库 ， 这 是 它 提供 的 最 好 的 工具 之 一 。 除 
此 之 外 还 包括 了 一 个 主题 转换 器 ， 人 允许 用 户 修改 主题 。 试 验 版 本 是 免费 的 ， 过 了 试 
验 期 就 需要 自己 付费 维持 原来 的 服务 了 。 


> DIVSHOT 





15. 


PaintStrap 使 用 Adobe kuler/COLOURIovers 颜色 组 合 来 生成 漂亮 的 Twitter 
Bootstrap 主题 。 这 个 工具 特别 容易 安装 ， 同 时 很 容易 下 载 CSS 文件 并 且 也 很 容易 
蔡 换 成 另 一 个 标准 的 文件 。 


W3School Bootstrap 教程 


PaintStrap Home — Gatey re vIngw fngah asu 


PaintStrap 


Generate beautiful Twitter Bootstrap themes using the Adobe kuler / COLOURIovers color scheme 


Step 1 input a color scheme Step È Set colors Step } Download CSS fies 


Step 1: Input a color scheme 


f^ Use an Adobe kuier color schwme(Color Theme) 
Pease roA a feme ID or a permalink URL 


Eg 1054168, 1006374, 2043016 
O Use a COLOURiovers color schemejPalette| 


Pase cout à paiete ID or a permalink URL 


Eg 694737, 675929, 71121 
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Bootstrap HTML 编 码 规范 


语法 


。 用 两 个 空格 来 代替 制 表 符 (tab) -- 这 是 唯一 能 保证 在 所 有 环境 下 


现 的 方法 。 
e 铸 套 元 素 应 当 缩 进 一 次 〈 即 两 个 空格 ) 。 
e 对 于 属性 的 定义 ， 确 保全 部 使 用 双 引 号 ， 绝 不 要 使 用 单 引 号 。 


号 一 致 展 


e 不 要 在 自 闭合 (self-closing) 元 素 的 尾部 添加 斜 线 -- HTML5 规范 中 明确 说 明 


这 是 可 选 的 。 


e 不 要 省 上 略 可 选 的 结束 标签 (closing tag) (例如 ，  &1t;/li&gt; 


&lt;/body&gt; ) o 


实例 : 


<!DOCTYPE html» 
«html» 
«head» 
«title»-Page title«c/title- 
</head> 
<body> 
«img src-"images/company-logo.png" alt="Company"> 
«hi class-z"hello-world"2Hello, world!«/h1» 
</body> 
</html> 


HTML5 doctype 


为 每 个 HTML 页 面 的 第 一 行 添 加 标准 模式 (standard mode) 的 声明 ， 这 


保 在 每 个 浏览 器 中 拥有 一 致 的 展现 。 


实例 : 
<!DOCTYPE html» 
«html» 
«head» 


«/head» 
«/html» 


语言 属性 


根据 HTML5 规范 : 


HB 


E45 Tf 


强烈 建议 为 html 根 元 素 指定 lang 属性 ， 从 而 为 文档 设置 正确 的 语言 。 这 将 有 助 于 
语音 合成 工具 确定 其 所 应 该 采用 的 发 音 ， 有 助 于 翻译 工具 确定 其 翻译 时 所 应 遵守 的 
规则 等 等 。 

更 多 关于 lang 属性 的 知识 可 以 从 此 规范 FR T f. 


这 里 列 出 了 语言 代码 表 。 
«html lang="zh-CN"> 
<l- T 


</html> 


IE 兼容 模式 


IE 支持 通过 特定 的 &lt;meta&gt; 标签 来 确定 绘制 当前 页 面 所 应 该 采用 的 IE 版 
本 。 除 非 有 强烈 的 特殊 需求 ， 否 则 最 好 是 设置 为 edge mode， 从 而 通知 IE 采用 其 
所 支持 的 最 新 的 模式 。 


«meta http-equiv-"X-UA-Compatible" content-"IE-Edge'» 


字符 编码 


通过 明确 声明 字符 编码 ， 能 够 确保 浏览 器 快速 并 容易 的 判断 页 面 内 容 的 泻 染 方式 。 
这 样 做 的 好 处 是 ， 可 以 避免 在 HTML 中 使 用 字符 实体 标记 (character entity) , M 
而 全 部 与 文档 编码 一 致 (一般 采用 UTF-8 编码 ) o 


<head> 
<meta charset="UTF-8"> 
</head> 


引入 CSS 和 JavaScript 文件 


根据 HTML5 规范 ， 在 引入 CSS 和 JavaScript 文件 时 一 般 不 需要 指定 type 属 
性 ， 因 为 text/css 和 text/javascript 分 别 是 它们 的 默认 值 。 


HTMLS spec links 


e Using link 
e Using style 
e Using script 


«!-- External CSS --> 
«link rel="stylesheet" href-z'code-guide.css'» 


«!-- In-document CSS --> 
«style» 
"MM T 
«/style» 
«!-- JavaScript --» 


«script srcz'"code-guide.js"»«/script» 


实用 为 王 


尽量 遵循 HTML 标准 和 语义 ， 但 是 不 要 以 牺牲 实用 性 为 代价 。 任 何 时 候 都 要 尽量 使 
用 最 少 的 标签 并 保持 最 小 的 复杂 度 。 


属性 顺序 
HTML 属性 应 当 按照 以 下 给 出 的 顺序 依次 排列 ， 确 保 代 码 的 易 读 性 。 


e class 

e id , name 

e data-* 

e src, for , type , href 
e title , alt 

e aria-* , role 


class 用 于 标识 高 度 可 复 用 组 件 ， 因 此 应 该 排 在 首位 。id 用 于 标识 具体 组 件 ， 应 当 
谨慎 使 用 〈 例 如， 页 面 内 的 书签 ) ， 因 此 排 在 第 二 位 。 


«a classz"..." idz"..." data-modal-"toggle" href="#"> 
Example link 
</a> 


<input class="form-control" type="text"> 


<img src="... " alt="... "> 


布尔 (boolean) 型 属性 


布尔 型 属 高 性 可 以 在 声明 时 不 赋值 。 XHTML 规范 要 求 为 其 赋值 ， 但 是 HTML5 规范 


更 多 信息 请 参考 WhatWG section on boolean attributes : 


元 素 的 布尔 型 属性 如 果 有 值 ， 就 是 true， 如 果 没 有 值 ， 就 是 false。 
如 果 一 定 要 为 其 赋值 的 话 ， 请 参考 WhatWG 规范 : 


如 果 属性 存在 ， 其 值 必 须 是 空 字符 串 或 […] 属性 的 规范 名 称 ， 并 且 不 要 再 收尾 添加 
空白 符 。 


简单 来 说 ， 就 是 不 用 赋值 。 
«input type="text" disabled» 
«input type="checkbox" valuez"1" checked» 
«select» 


«option value-"1" selected»1«/option» 
</select> 


减少 标签 的 数量 


编写 HTML 代码 时 ， 尽 量 避 免 多 余 的 父 元 素 。 很 多 时 候 ， 这 需要 和 迭代 和 重 构 来 实 
现 。 请 看 下 面 的 案例 : 


«!-- Not so great --> 
«span class-"avatar'» 
«img src="..."> 
«/span» 
<!-- Better --» 
«img class-"avatar" srcz"..."» 


JavaScript 生成 的 标签 


通过 JavaScript 生成 的 标签 让 内 容 变 得 不 易 查 找 、 编 辑 ， 并 且 降 低 性 能 。 能 避免 时 
尽量 避免 。 


Bootstrap CSS 编 码 规范 


语法 


e Dd eese (tab) -- 这 是 唯一 能 保证 在 所 有 环境 下 获得 一 致 展 

现 的 万 法 。 

为 选择 器 分 组 时 ， 将 单独 的 选择 器 单独 放 在 一 行 。 

为 了 代码 的 易 读 性 ， 在 每 个 声明 块 的 左 花 括 号 前 添加 一 个 空 

声明 块 的 右 花 括号 应 当 单独 成 行 。 

每 条 声明 语句 的 : 后 应 该 插入 一 个 空格 。 

为 了 获得 更 准确 的 错误 报告 ， 每 条 声明 都 应 该 独占 一 行 。 

所 有 声明 语句 都 点 当 以 分 号 结尾 。 最 后 一 条 声明 语句 后 面 的 分 号 是 可 选 的 ， 但 

是 ， 如 果 省 略 这 个 分 号 ， 你 的 代码 可 能 更 易 出 错 。 

e 对 于 以 逗号 分 隔 的 属性 值 ， 每 个 逗号 后 面 都 应 该 插入 一 个 空格 CB 
如 ， box-shadow ) 。 

e 不 要 在 rgb(). rgba(). hsl(). hsla() 或 rect() 值 的 内 部 的 去 
号 后 面 插 和 空格。 这样 利 于 从 多 个 属性 值 〈 既 加 逗号 也 加 空格 ) 中 区 分 多 个 颜 
色 值 (只 加 逗号 ， 不 加 空格 ) 。 

e 对 于 属性 值 或 颜色 参数 ， 省 略 小 于 1 的 小 数 前 面 的 0 (例如 ， ,5 RE 
0.5 ; -.5px 代替 -6.5px ) 。 

十 六 进 制 值 应 该 全 部 小 写 ， 例 如 ， #fff 。 在 扫描 文档 时 ， 小 罕 字符 易于 分 

辨 ， 因 为 他 们 的 形式 更 易于 区 分 。 

e 尽量 使 用 简写 形式 的 十 六 进 制 值 ， 例 如 ， 用 #fff RE #ffffff 。 

e 为 选择 器 中 的 属性 添加 双 引 号 ， 例 如 ，  input[type-"text"] 。 只 有 在 某 些 
情况 下 是 可 选 的 ， 但 是 ， 为 了 代码 的 一 致 性 ， 建 议 都 加 上 双 引 号 。 

e 避免 为 0 值 指定 单位 ， 例 如 ， 用 margin: 0; RË margin: Opx; o 


对 于 这 里 用 到 的 术语 有 疑问 吗 ? 请 参考 Wikipedia 上 的 syntax section of the 
Cascading Style Sheets article, 


/* Bad CSS */ 
.selector, .selector-secondary, .selector[type=text] { 
padding:15px; 
margin:Opx Opx 15px; 
background-color:rgba(0, ©, ©, 0.5); 
box-shadow:0px 1px 2px ZCCC,inset © 1px © £Z£FFFFFF 
} 


/* Good CSS */ 
.selector, 
.selector-secondary, 
.selector[typez'"text"] ( 
padding: 15px; 
margin-bottom: 15px; 
background-color: rgba(0,0,0,.5); 
box-shadow: © 1px 2px Zccc, inset © 1px © #fff; 
} 


声明 顺序 
相关 的 属性 声明 应 当 必 为 一 组 ， 并 按照 下 面 的 顺序 排列 : 


1. Positioning 
2. Box model 
3. Typographic 
4. Visual 


由 于 定位 (positioning) 可 以 从 正常 的 文档 流 中 移 除 元 素 ， 并 且 还 能 覆盖 爹 模型 
(box model) 相关 的 样式 ， 因 此 排 在 首位 。 盒 模型 排 在 第 二 位 ， 因 为 它 决定 了 组 
件 的 尺寸 和 位 置 。 


其 他 属性 只 是 影响 组 件 的 内 部 (inside) 或 者 是 不 影响 前 两 组 属性 ， 因 此 排 在 后 
面 。 


完整 的 属性 列表 及 其 排列 顺序 请 参考 Recess。 


.declaration-order ( 
/* Positioning */ 
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
z-index: 100; 


/* Box-model */ 
display: block; 
float: right; 
width: 100px; 
height: 100px; 


/* Typography */ 

font: normal 13px "Helvetica Neue", sans-serif; 
line-height: 1.5; 

color: £333; 

text-align: center; 


/* Visual */ 
background-color: #f5f5f5; 
border: 1px solid #e5e5e5; 
border-radius: 3px; 


A MISC i7 
opacity: 1; 


不 要 使 用 @import 


与 &lt;link&gt; 标签 相 比 ， @import 指令 要 慢 很 多 ， 不 光 增 加 了 额外 的 请 求 
次 数 ， 还 会 导致 不 可 预料 的 问题 。 蔡 代办 法 有 以 下 几 种 : 


e 使 用 多 个 &lt;link&gt; 元 素 
e 通过 Sass E Less 类 似 的 CSS 预 处 理 器 将 多 个 CSS 文件 编译 为 一 个 文件 
e 通过 Rails, Jekyll 或 其 他 系统 中 提供 过 CSS 文件 合并 功能 


请 参考 Steve Souders 的 文章 了 解 更 多 知识 。 


«!-- Use link elements --> 
«link rel="stylesheet" hrefz'core.css'"» 


«!-- Avoid Qimports --» 
«style» 

Qimport url("more.css"); 
</style> 


媒体 查询 (Media query) 的 位 置 


将 媒体 查询 放 在 尽 可 能 相关 规则 的 附近 。 不 要 将 他 们 打包 放 在 一 个 单一 样式 文件 中 
或 者 放 在 文档 底部 。 如 果 你 把 他 们 分 开 了 ， 将 来 只 会 被 大 家 得 忘 。 下 面 兴 出 一 个 
型 的 实例 。 


.element ( ... ) 
.element-avatar ( ... ) 
.element-selected ( ... ) 


Qmedia (min-width: 480px) (1 
.element ( ...) 
.element-avatar ( ... ) 
.element-selected ( ... } 


带 前 级 的 属性 


当 使 用 特定 厂商 的 带 有 前 级 的 属性 时 ， 通 过 缩 进 的 方式 ， 让 每 个 属性 的 值 在 垂直 方 
向 对 齐 ， 这 样 便于 多 行 编辑 。 

在 Textmate 中 ， 使 用 Text — Edit Each Line in Selection (??A)。 在 Sublime 
Text 2 中 ， 使 用 Selection 一 Add Previous Line (??1) 和 Selection 一 Add 
Next Line (?? |), 


/* Prefixed properties */ 
.selector ( 
-webkit-box-shadow: © 1px 2px rgba(0,0,0,.15); 
box-shadow: 0 1px 2px rgba(0,0,0,.15); 


单行 规则 声明 

对 于 只 包含 一 条 声明 的 样式 ， 为 了 易 读 性 和 便于 快速 编辑 ， 建 议 将 语句 放 在 同一 

行 。 对 于 带 有 多 条 声明 的 样式 ， 还 是 应 当 将 声明 分 为 多 行 。 

这 样 做 的 关键 因素 是 为 了 错误 检测 -- 例如 ，CSS 校 验 器 指出 在 183 行 有 语法 错 

误 。 如 果 是 单行 单条 声明 ， 你 就 不 会 忽略 这 个 错误 ; 如 果 是 单行 多 条 声明 的 话 ， 你 
就 要 仔细 分 析 避 免 漏 掉 错 误 了 。 


/* Single declarations on one line */ 
.Shani ( width: 60px; } 
.span2 ( width: 140px; } 
.span3 ( width: 220px; } 


/* Multiple declarations, one per line */ 
.Shrite { 

display: inline-block; 

width: 16px; 

height: 15px; 

background-image: url(../img/sprite.png); 
} 
.icon 1 background-position: © 0; } 
.icon-home { background-position: © -20px; } 
.icon-account { background-position: © -40px; } 


简写 形式 的 属性 声明 


在 需要 显示 地 设置 所 有 值 的 情况 下 ， 应 当 尽 量 限制 使 用 简写 形式 的 属性 声明 。 常 见 
的 滥用 简写 属性 声明 的 情况 如 下 : 


padding 
margin 

font 
background 
border 
border-radius 


大 部 分 情况 下 ， 我 们 不 需要 为 简写 形式 的 属性 声明 指定 所 有 值 。 例 如 ，HTML 的 
heading 元 素 只 需要 设置 上 、 下 边 距 (margin) 的 值 ， 因 此 ， 在 必要 的 时 候 ， 只 需 
覆盖 这 两 个 值 就 可 以 。 过 度 使 用 简写 形式 的 属性 声明 会 导致 代码 混乱 ， 并 且 会 对 属 
性 值 带 来 不 必要 的 覆盖 从 而 引起 意外 的 副作用 。 


MDN (Mozilla Developer Network) 上 一 片 非常 好 的 关于 shorthand properties 的 
文章 ， 对 于 不 太 熟 悉 简 写 属 性 声明 及 其 行为 的 用 户 很 有 用 。 


/* Bad example */ 
.element { 
margin: © © 10px; 
background: red; 
background: url("image.jpg"); 
border-radius: 3px 3px 0 0; 


j 

/* Good example */ 

.element { 
margin-bottom: 10px; 
background-color: red; 
background-image: url("image.jpg"); 
border-top-left-radius: 3px; 
border-top-right-radius: 3px; 

j 


Less 和 Sass rh E 


XESeJEQASRBUBUE. IEAA SZXMQSDBRHEE, BIJETEDG BR 
套 。 只 有 在 必须 将 样式 限制 在 父 元 素 内 (也 就 是 后 代 选 择 器 ) ， 并 且 存 在 多 个 需要 
RENTREE. 


// Without nesting 
.table > thead > tr > th {...} 
.table > thead > tr > td ( .. ? 


// With nesting 
.table > thead > tr { 


d a h 
2 o 0 o 
} 
注释 


代码 是 由 人 编写 并 维护 的 。 请 确保 你 的 代码 能 够 自 描述 、 注 释 良 好 并 且 易 于 他 人 理 
解 。 好 的 代码 注释 能 够 传达 上 下 文 关系 和 代码 目的 。 不 要 简单 地 重申 组 件 或 class 
名 称 。 


对 于 较 长 的 注释 ， 务 必 书 写 完 整 的 句子 ; 对 于 一 般 性 注解 ， 可 以 书写 简洁 的 短语 。 


/* Bad example */ 
/* Modal header */ 
.modal-header ( 


: —— 


/* Good example */ 
/* Wrapping element for .modal-title and .modal-close */ 
.modal-header { 


j 


class 命名 


e class 名 称 中 只 能 出 现 小 写字 符 和 破 折 号 (dashe) (不 是 下 划 线 ， 也 不 是 驼峰 
MAE) 。 破 折 号 应 当 用 于 相关 class 的 命名 (类似 于 命名 空间 ) C] 
如 ， .btn 和 .btn-danger ) 。 

e 避免 过 度 任 意 的 简写 。 .btn 代表 button， 但 是 .s 不 能 表达 任何 意思 。 

e class 名 称 应 当 尽 可 能 短 ， 并 且 意 义 明 确 。 

e 使 用 有 意义 的 名 称 。 使 用 有 组 织 的 或 目的 明确 的 名 称 ， 不 要 使 用 表现 形式 
(presentational) 的 名 称 。 

基于 最 近 的 父 class 或 基本 (base) class 作为 新 class 的 前 级 。 

e 使 用 .js-* class 来 标识 行为 (和 与 样式 相对 ) ， 并 且 不 要 将 这 些 cass 包含 
到 CSS 文件 中 。 


在 为 Sass 和 Less 变量 命名 是 也 可 以 参考 上 面 列 出 的 各 项 规范 。 


/* Bad example */ 
dico dee 

neden ccc 
.header ( ... } 


/* Good example */ 
.tweet { ... } 
.important { ... } 
.tweet-header ( ... ) 


选择 如 


对 于 通用 元 素 使 用 class ， 这 样 利 于 泻 染 性 能 的 优化 。 

e 对 于 经 常 出 现 的 组 件 ， 避 免 使 用 属性 选择 器 (例如 ， [class^="..."] ) 。 
浏览 器 的 性 能 会 受到 这 些 因 素 的 影响 。 

e 选择 器 要 尽 可 能 短 ， 并 且 尽 量 限制 组 成 选择 器 的 元 素 个 数 ， 建 议 不 要 超过 3 

e 只 有 在 必要 的 时 候 才 将 class 限制 在 最 近 的 父 元 素 内 (也 就 是 后 代 选 择 器 ) 

(全 如 ， 不 使 用 带 前 级 的 class 时 -- 前 级 类 似 于 命名 空间 ) 。 


扩展 阅读 : 


e Scope CSS classes with prefixes 
e Stop the cascade 


/* Bad example */ 


span { ... } 
.page-container #stream .stream-item .tweet .tweet-header .username 
„avatar ( ... ) 


/* Good example */ 


.avatar ( ... 
.tweet-header .username ( ... ) 
.tweet .avatar ( ... ) 


LN» : 





代码 组 织 

e 以 组 件 为 单位 组 织 代 码 段 。 

e 制定 一 致 的 注释 规范 。 

e 使 用 一 致 的 空白 符 将 代码 分 隔 成 块 ， 这 样 利 于 扫描 较 大 的 文档 。 

e 如 果 使 用 了 多 个 CSS 文件 ， 将 其 按照 组 件 而 非 页 面 的 形式 分 拆 ， 因 为 页 面 会 


被 重组 ， 而 组 件 只 会 被 移动 。 


Vas 

* Component section heading 
iD 

.element { ... ) 

VES 


* Component section heading 
* 


* 


“7 


Sometimes you need to include optional context for the entire c« 


.element { ... ) 


/* Contextual sub-component or modifer */ 
.element-heading { ... } 


[gi E uso ex] 


2a E dU MILI 
将 你 的 编辑 器 按照 下 面 的 配置 进行 设置 ， 以 避免 常见 的 代码 不 一 致 和 差异 : 
e 用 两 个 空格 代替 制 表 符 (soft-tab 即 用 空格 代表 tab 符 ) 。 





e 保存 文件 时 ， 删 除 尾部 的 空白 符 。 
e. 设置 文件 编码 为 UTF-8。 
e. 在 文件 结尾 添加 一 个 空白 行 。 


参照 文档 并 将 这 些 配置 信息 添加 到 项 目的 .editorconfig 文件 中 。 例 如 : 
Bootstrap 中 的 .editorconfig 实例 。 更 多 信息 请 参考 about EditorConfig。 


免责 声明 


W3School 提 供 的 内 容 仅 用 于 培训 。 我 们 不 保证 内 容 的 正确 性 。 通 过 使 用 本 站 内 容 
随 之 而 来 的 风险 与 本 站 无 关 。W3School 简 体 中 文 版 的 所 有 内 容 仅 供 测试 ， 对 任何 
法 律 问题 及 风险 不 承担 任何 责任 。 


